为什么在我的iPad（Safari和Chrome）上渲染时，我的画布上会出现白线？

Question

我使用JS一次更新一行画布。在我的笔记本电脑上，画布按预期渲染。在我的iPad上，每次刷新时，画布上的白色水平线会出现在不同的行上。

如果我在iPad上放大或缩小，线条会消失。有关为什么会发生这种情况以及如何解决这个问题的想法？我尝试通过SO上提到的几种方法强制重新绘制浏览器窗口。它没有改变任何东西。

以下是代码：http://jsfiddle.net/RFf5r/

function paintRow(y)
{

    if(y == 100)
        return;

    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var imageData = ctx.createImageData(100, 1);

    var i = 0;
    for(x = 0; x<100; x++)
    {
        imageData.data[i] = x / 100 * 255;
        imageData.data[i+1] = 0;
        imageData.data[i+2] = 0;
        imageData.data[i+3] = 255;
        i+=4
    }

    ctx.putImageData(imageData, 0, y);


    setTimeout(function() { paintRow(y+1); }, 10);
}


paintRow(0);

Answer 1

以下是一种似乎有效的解决方法：

c.style.zoom = c.style.zoom == "100%" ? "100.0001%" : "100%";

每次更新后

。