javascript - 鼠标在 Canvas 上的位置

Question

下面的代码绘制正确，但绘制到错误的坐标。它应该绘制鼠标所在的位置。我无法发现我的错误。谢谢。

JSFIDDLE

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();
    }
});

Answer 1

您正在 CSS 中设置 Canvas 宽度和高度。这只是像拉伸(stretch)图像一样拉伸(stretch) Canvas 。

效果是在错误的地方绘制。

相反，您需要在标签本身上设置 Canvas 尺寸:

<canvas width="400" height="400"></canvas>