Question

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

脚本有效，但不正确。不知何故，点击事件发生的圈子和圈子中心不匹配。有什么想法吗？

以下是代码：

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

Answer 1

您需要将宽度和高度属性添加到canvas元素中，如下所示:(您已将其设置为样式）

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

看看这个小提琴：

http://jsfiddle.net/7xQZ2/

添加width和height参数将指定画布应该有多少像素。风格一只是显示它应该显示的大小（它上面的一切都会被拉伸）。

Answer 2

canvas元素需要height和width标签。这有点奇怪，特别是对于HTML5表示法。

尝试在文档ready-statement中添加它（在画布绘图代码之前），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

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

2 个答案: