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

我正在编写一个简单的脚本，用户在画布中的任意位置单击并出现一个圆圈。JavaScript在鼠标单击时画一个圆圈 - 坐标不匹配

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

下面是代码：

<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>

来源

2013-03-26 Bor

画布元素需要高度和宽度标签。这有点奇怪，特别是对于HTML5表示法。

尝试在文档就绪语句（在画布绘制代码之前）中添加此项，并且jQuery会根据您的CSS样式为您添加它们。

$('#special').attr('height', $('#special').css('height')); 
$('#special').attr('width', $('#special').css('width'));

这种方法比使用手动添加的属性值的正侧是，你只需要存储的尺寸一次，排除将来出现混乱，如果你会使用外部样式表;

CSS

#special { 
    width: 500px; 
    height: 500px; 
    border:1px ridge green; 
}

HTML

<canvas id="special">Not supported</canvas>

JSfiddle

来源

2013-03-26 14:47:28

您需要的宽度和高度属性添加到您的canvas元素，像这样：（你有它的风格）

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

看看这个小提琴：

http://jsfiddle.net/7xQZ2/

添加宽度和唤起注意t参数将指定您的画布应该有多少像素。风格一显示它应该显示的大小（它上面的所有东西都会被拉伸）。

来源

2013-03-26 14:40:16

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

回答

相关问题