javascript - 为什么多次调用 fillRect() 比一次调用 fillRect() 慢？

Question

为什么会这样:

var rows = 80
var cols = 120
var tw = 5

for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
        context.fillRect(j*tw, i*tw, tw, tw)
    }
}

运行速度比这慢得多:

context.fillRect(0, 0, canvas.width, canvas.height)

当它们填充相同数量的像素时？我天真地以为 fillRec() 只是填充一堆像素，但显然它在做其他事情。它还在做什么？

Answer 1

在扫描线算法中，有很多代码可以优化像素的渲染。应用当前变换，然后剪切，然后边缘排序，这必须在写入像素之前发生。随着像素数的增加，它们的效率最高。

要提高速度并让 GPU 渲染像素，请渲染第一个矩形，然后通过 drawImage 调用复制该矩形，如下所示。

var rows = 80;
var cols = 120;
var tw = 5;
ctx.fillRect(0, 0, tw, tw);
for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
        if(i+j !== 0){
            ctx.drawImage(ctx.canvas,0,0,tw,tw,j*tw, i*tw, tw, tw);
        }
    }
}

将比所有 fillRect 调用更快。

虽然改进无法与单个渲染调用相比，但绘制位图使用硬件来渲染像素，而 fillRect 更依赖于软件渲染(完全或部分我不确定所使用的方法)