画布上的鼠标位置答案

【问题标题】：Mouse position on canvas painting画布上的鼠标位置
【发布时间】：2014-01-20 11:20:31
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery html canvas

【解决方案1】：

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

效果画错地方了。

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

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

【讨论】：

谢谢。我白白浪费了我的时间：D。但为什么一定要这样呢？
只要把画布想象成一个可以绘制的元素，这样就更有意义了。
请注意，您也可以使用 JavaScript 设置宽度/高度，如下所示：canvas.width = '400'; canvas.height = '300';
@ryanbrill：是的。但是 height 和 width 属性是数字，所以没有引号会更好。（无论哪种方式都可以，但看起来更干净。）
@ryanbrill 在更正的小提琴中，我为他的“temp_canvas”做了那个:)

【解决方案2】：

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

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

【讨论】：