画布上的鼠标位置

Posted 2023-05-08

【中文标题】画布上的鼠标位置

【英文标题】：Mouse position on canvas painting

【发布时间】：2014-01-20 11:20:31

【问题描述】：

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

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

【参考方案1】：

您正在 CSS 中设置画布的宽度和高度。这只是像拉伸图像一样拉伸画布。

效果画错地方了。

相反，您需要在标签本身上设置画布尺寸：

<canvas  ></canvas>

【讨论】：

谢谢。我白白浪费了我的时间：D。但为什么一定要这样呢？

只要把画布想象成一个可以绘制的 元素，这样就更有意义了。

请注意，您也可以使用 javascript 设置宽度/高度，如下所示：canvas.width = '400'; canvas.height = '300';

@ryanbrill：是的。但是 height 和 width 属性是数字，所以没有引号会更好。 （无论哪种方式都可以，但看起来更干净。）

@ryanbrill 在更正的小提琴中，我为他的“temp_canvas”做了那个:)

【参考方案2】：

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

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