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更依赖于软件渲染（完全或部分我不确定使用的方法）

为什么对fillRect（）的多次调用比对fillRect（）的调用慢？

1 个答案: