Question

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

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 width="400" height="400"></canvas>

Answer 2

<canvas>有自己的width和height，它不仅定义了它的物理大小（除非CSS介入），还包括其逻辑大小（行数/列数）其绘图表面上的像素数）。当CSS更改大小时，画布会拉伸以适合，但不会更改其逻辑大小。基本上，像素也会拉伸，因此逻辑和物理坐标不再匹配。

要解决此问题，您可以进行数学运算以匹配坐标，或者专门使用画布自己的宽度/高度来调整它们的大小，或者在事实之后设置画布的宽度和高度属性以匹配由CSS设置的宽度和高度。

画布上的鼠标位置

2 个答案: