javascript - html canvas元素的绘图操作是异步的吗？

Question

var ctx = canvas.getContext('2d');
for (var i = 0; i < canvas.height; i++) {
    for (var j = 0; j < canvas.width; j++) {
        var r1 = Math.round(Math.random() * 255),
            r2 = Math.round(Math.random() * 255),
            r3 = Math.round(Math.random() * 255);
        ctx.fillStyle = 'rgba(' + r1 + ',' + r2 + ',' + r3 + ',' + '1' + ')';
        ctx.fillRect(j, i, 1, 1);
    }
}

图像是一下子渲染出来的，而不是一个个像素出现的。

Answer 1

对JS代码来说是同步的，但对浏览器的显式来说是异步的。

canvas是向图象缓冲区里绘制的，浏览器以一定的刷新频率从缓冲区里取出图象数据显示。如果你在浏览器的2次刷新间隔之间先画一个红色矩形，然后紧接着再在相同的位置画一个大小相同的蓝色矩形，那么我们只能看到蓝色矩形（不是刷新频率快我们的眼睛跟不上，而是红色矩形压根不会被浏览器渲染到屏幕上）