下面的代码绘制正确,但绘制到错误的坐标。它应该绘制鼠标所在的位置。我无法发现我的错误。谢谢。
container.mousedown(function(e) {
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
context_temp.beginPath();
context_temp.moveTo(x, y);
started = true;
});
container.mousemove(function(e) {
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
if (started) {
context_temp.lineTo(x, y);
context_temp.stroke();
}
});
container.mouseup(function(e) {
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
if (started) {
container.mousemove(x, y);
started = false;
update();
}
});
最佳答案
您正在 CSS 中设置 Canvas 宽度和高度。这只是像拉伸(stretch)图像一样拉伸(stretch) Canvas 。
效果是在错误的地方绘制。
相反,您需要在标签本身上设置 Canvas 尺寸:
<canvas width="400" height="400"></canvas>
关于javascript - 鼠标在 Canvas 上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20892632/