javascript - 可绘制的画布在错误的位置渲染线条

Question

我正在尝试创建用户可以在其上绘制的画布。但是，我遇到了一些问题，我无法理解它们为什么会首先发生。

离画布原点 (0,0) 越远，绘制的线越远。出了点问题，但我似乎无法弄清楚是什么。

我已经准备了一个带有问题示例的jsFiddle

$(canvas).on('mousedown', handlePress);
$(canvas).on('mousemove', handleMove);
$(canvas).on('mouseup', handleRelease);

function handlePress(e){
    drawing = true;    
    startx = e.pageX - this.offsetLeft;
    starty = e.pageY - this.offsetTop;
}

function handleMove(e){
    if (drawing){
        var newX = e.pageX - this.offsetLeft,
            newY = e.pageY - this.offsetTop;

        ctx.beginPath();
        ctx.moveTo(startx, starty);
        ctx.lineTo(newX, newY);
        ctx.stroke();

        startx = newX;
        starty = newY;
    }
}

function handleRelease(e){
    drawing = false;
}

我尝试使用 clientX/clientY 而不是 pageX 和 pageY 但结果相同。

Answer 1

我能够解决这个问题，显然画布比渲染时更大。我已经在 CSS 中指定了大小，但是为了让它工作，我需要在 html 中指定 canvas 元素的宽度和高度属性。