chrome 仅在整数坐标处绘制图像

Question

这份同名错误报告很好地解释了我遇到的问题。有一些测试表明了问题。

chrome drawImage only at integer coordinate

我在这里创建了一个 fiddle 代码较小的代码以准确显示差异。

var x = 0,
    y = 0;
cv = document.getElementById("my-canvas");
ctx = cv.getContext("2d");

ctx.fillStyle = 'rgb(255, 255, 255)';

var im = new Image();
im.src = "http://dummyimage.com/32x32/ffffff/000000.png?text=png";

setInterval(function () {
    ctx.clearRect(0, 0, cv.width, cv.height);

    // Uncomment one of these
    ctx.fillRect(x, y, 32, 32);
    //    ctx.fillRect(Math.round(x), Math.round(y), 32, 32); // Chrome
    //    ctx.fillRect(Math.floor(x), Math.floor(y), 32, 32);
    //    ctx.fillRect(Math.ceil(x), Math.ceil(y), 32, 32);

    ctx.drawImage(im, x, y + 40);

    x += 0.1;
    y += 0.07;

}, 1000 / 20);

jsfiddle

发生的事情是 chrome 使用 Math.round() 对坐标进行舍入。如果您取消注释带有 Math.round() 的行，您将看到两个方块在 chrome 中的行为相同。而在 FF 中，两个方块都表现得很平滑。

我想在 chrome 中获得流畅的行为。如果真的是bug，我想补bug报告，因为旧的已经关闭了

我已经测试了 imageSmoothingEnabled 有何帮助，似乎它在 chrome 中没有任何效果。

这是另一个 fiddle，显示 imageSmoothingEnabled 是否有帮助。

jsfiddle

Answer 1

将 canvas 的上下文旋转一个很小的角度：

ctx.rotate(0.0000000001);

这似乎解决了问题（至少在 PC 上）。

chrome 仅在整数坐标处绘制图像

chrome drawImage only at integer coordinate

google-chrome

rounding

drawimage

coordinates

html5-canvas