2

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

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

这是代码：

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

2 回答 2

6

您需要像这样将宽度和高度属性添加到您的画布元素：（您有它的样式）

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

看看这个小提琴：

http://jsfiddle.net/7xQZ2/

添加宽度和高度参数将指定您的画布应该有多少像素。样式一只是显示它应该显示多大（它上面的所有东西都会被拉伸）。

于 2013-03-26T14:40:16.647 回答
4

画布元素需要高度和宽度标签。这有点奇怪，尤其是对于 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-26T14:47:28.890 回答