Question

我一直在努力让这段代码正常运转。基本上，我希望用户能够单击画布内的任何位置，并且单击点处的坐标将是绘制矩形的位置。但是，我的代码将矩形放在画布上完全意想不到的点上。我检查了Firebug中的值，根据我在画布中单击的位置，它们似乎是准确的，所以我不确定为什么矩形没有被绘制到正确的点。也许还有一些其他的错误，我没有看到，所以任何帮助或输入将不胜感激。我在下面发布了相关代码。

我还应该注意canvas元素在div中，id ='container'。

 $('#container').click(function (e) {
     var offset=$(this).offset();
     var x=(e.pageX - offset.left);
     var y=(e.pageY - offset.top);

     ctx.fillStyle='#FF0000'; //color red
     ctx.fillRect(x,y,10,10); //draw 10 x 10 rectangle starting at x,y
     });

Answer 1

pageX / Y获取页面的x / y坐标（想想100,200）。让我们说你的画布位于页面上的（100,100）。当您对该点进行绘图时，您可以说＆＃34;绘制一个点100,200与CANVAS相关的点。这意味着你试图用（200,300）代替你需要的（100,200）linke。您需要获得与画布相关的x / y，如下所示：

var x = event.offsetX !== undefined ? event.offsetX : event.layerX;
var y = event.offsetY !== undefined ? event.offsetY : event.layerY;

Answer 2

如果您只想在画布上添加点击事件，那么最好使用

$("#myCanvas").click(function(e){
});

如果使用myCanvas而不是容器，则$(this)将引用画布，并获得鼠标相对于画布的位置。这是因为你使用容器div，变量偏移是错误的。

如何在HTML5画布上准确绘制矩形？

2 个答案: