gpt4 book ai didi

JavaScript 在鼠标单击时绘制一个圆圈 - 坐标不匹配

转载 作者:行者123 更新时间:2023-12-03 09:41:44 25 4
gpt4 key购买 nike

我正在编写一个简单的脚本,用户在 Canvas 中的任意位置单击并出现一个圆圈。

脚本有效但不正确。不知何故,点击事件发生的坐标和圆心不匹配。任何想法为什么?

代码如下:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("#special").click(function(e){

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

/* var c=document.getElementById("special"); */
var ctx= this.getContext("2d"); /*c.getContext("2d");*/
ctx.beginPath();
ctx.arc(x, y, 10,0, 2*Math.PI);
ctx.stroke();

$('#status2').html(x +', '+ y);
});
})

</script>
<body>
<h2 id="status2">0, 0</h2>
<canvas style="width: 500px; height: 500px; border:1px ridge green;" id="special">

</canvas>
</body>
</html>

最佳答案

您需要像这样将宽度和高度属性添加到您的 Canvas 元素中:(您已将其设置为样式)

 <canvas width="500px" height="500px" style="width: 500px; height: 500px; border:1px ridge green;" id="special">

看看这个 fiddle :

http://jsfiddle.net/7xQZ2/

添加宽度和高度参数将指定 Canvas 的像素数。样式一仅显示应显示多大(上面的所有内容都会被拉伸(stretch))。

关于JavaScript 在鼠标单击时绘制一个圆圈 - 坐标不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15639692/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com