HTML5画布绘图应用程序中的鼠标坐标漂移

Question

我正在使用 HTML5 画布元素创建一个简单的绘图应用程序。程序逻辑运行良好，一切运行良好，除了一件事。

当我画第一条线时，鼠标坐标和线完美匹配。但是，在每条后续线之后，正在绘制的线的坐标大约偏离 0.5~1px。这些差异累积起来，在画出大约十条单独的线后，效果就很容易看到了。这发生在所有浏览器中。

如需实时示例，请查看this fiddle。我已经尽可能地剥离了一切。显然，真正的应用程序要复杂得多，但即使在这个简化版本中，问题仍然存在，这让我认为我遗漏了一些非常明显的东西。

我突然想到我可能会以某种方式四舍五入坐标，这是我能想到的唯一可以解释这种逐渐漂移的事情。我使用专有函数来获取偏移值，所以我尝试使用 jQuery（因为过去从未给我带来问题）但没有任何改变。

请帮我弄清楚为什么会这样！

---

显然我现在需要发布代码才能链接到 jsfiddle。我不知道代码的哪一部分可能是错误的，所以我提前为发布所有内容并创建一堵文字而道歉。

var offsetX = 0, offsetY = 0;
var currentMouseCoords = {
    x : 0,
    y : 0
};
var drawPing = null;
var ctx = null;

$('#cover').mousedown(function (event) {
    event.preventDefault();

    var f = $(this).offset();
    offsetX = f.left;
    offsetY = f.top;

    currentMouseCoords.x = event.pageX - offsetX;
    currentMouseCoords.y = event.pageY - offsetY;

    drawStart();

    if (!drawPing) {
        drawPing = setInterval(draw, 10);
    }
})
.mousemove(function (event) {

    currentMouseCoords.x = event.pageX - offsetX;
    currentMouseCoords.y = event.pageY - offsetY;

})
.mouseout(function (event) {
    //When mouse leaves canvas, quit drawing
    drawEnd();
})
.mouseup(function (event) {
    //When mouse leaves canvas, quit drawing
    drawEnd();
})


/* Functions that perform the actual drawing */

function drawStart () {
    //Get canvas context
    ctx = document.getElementById('canvas').getContext("2d");
    ctx.translate(0.5,0.5);

    //Set styles
    ctx.strokeStyle = '#333333';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.lineWidth = 1;

    //Begin path
    ctx.beginPath();
    ctx.moveTo(
        currentMouseCoords.x,
        currentMouseCoords.y
    );

}

function draw () {
    ctx.lineTo(
        currentMouseCoords.x, 
        currentMouseCoords.y
    );
    ctx.stroke();
}

function drawEnd () {
    clearInterval(drawPing);
    drawPing = null;
    if (ctx) {
        ctx.closePath();
        ctx = null;
    }
}

我想如果你只看实际的小提琴会更有意义....

---

为了记录，我用谷歌搜索了很长一段时间，看看是否有其他人有这个问题，但要么不是很常见，要么我找不到正确的单词组合。鼠标坐标有无数问题，但似乎没有一个与我遇到的相同。

Answer 1

您在 drawStart 函数中反复翻译，并且这些翻译正在累积：

ctx.translate(0.5,0.5)

您可以使用 translate(-.5,-.5) 反转翻译或将绘图代码包装在 ctx.save()/ctx.restore() 中。

您可能还想将 ctx=document... 移到 drawStart“循环”之外以获得更好的性能。

//Get canvas context outside drawStart

ctx = document.getElementById('canvas').getContext("2d");