Question

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

离画布原点（0,0）越远，绘制线越远。有些事情是错的，但我似乎无法弄清楚是什么。

我已经准备了一个jsFiddle，其中包含问题here

的示例

$(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元素的width和height属性。

可绘制画布将渲染线放在错误的位置

1 个答案: