画布绘画中鼠标位置

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

- ctulu

Answer 1

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

结果是在错误的位置绘制。

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

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

- Patrick Gunderson

---

谢谢。我白白浪费了几个小时:D。但为什么它必须是这样的呢？ - ctulu

只需将画布视为可以绘制的<img>元素，那么它就更有意义了。 - Patrick Gunderson

请注意，您也可以使用JavaScript设置宽度/高度，例如：canvas.width = '400'; canvas.height = '300'; - ryanbrill

@ryanbrill：是的。但是height和width属性是数字，所以最好不要加引号。（两种方式都可以使用，但不带引号更干净整洁。） - cHao

在经过修改的fiddle中，我已经为他的'temp_canvas'做了那个 :) - Patrick Gunderson

Answer 2

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

为了解决这个问题，你可以通过计算来将坐标匹配起来，或者仅使用画布自身的宽度/高度来设置画布大小，或者在CSS设置宽度和高度后，手动设置画布的宽度和高度属性以匹配CSS设置的宽度和高度。

- cHao