畫布上的鼠標位置

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

Answer 2

<canvas>有自己的width和height ，它不僅定義了它的物理大小（除非CSS介入），還有它的邏輯大小（繪圖表面上像素的行數/列數）。 當CSS更改大小時，畫布會拉伸以適合，但不會更改其邏輯大小。 基本上，像素也會拉伸，因此邏輯和物理坐標不再匹配。

要解決此問題，您可以進行數學運算以匹配坐標，或者僅使用畫布自己的寬度/高度來調整它們的大小，或者在事實之后設置畫布的寬度和高度屬性以匹配寬度和高度由CSS設置。