實驗
畫12 x 12的小方塊
let canvas = document.getElementById("canvas")
let ctx = canvas.getContext("2d")
let imageData = new ImageData(12, 12)
imageData.data.forEach((item, index) => {
imageData.data[index] = [0, 0, 0, 255][index % 4]
})
console.time()
for (let i = 0; i < 10000; i++) {
ctx.putImageData(imageData, x + i, y + i)
}
console.timeEnd()
this.ctx.fillStyle = rgba(0, 0, 0, 155)
console.time()
for (let i = 0; i < 10000; i++) {
ctx.fillRect(x + i, y + i, 12, 12)
}
console.timeEnd()
10次渲染結(jié)果:putImageData 效率是 fillRect 的 3.3%
putImageData / ms | fillRect / ms |
---|---|
1.348 | 0.032 |
0.767 | 0.019 |
0.550 | 0.028 |
0.296 | 0.020 |
1000次渲染結(jié)果:putImageData 效率是 fillRect 的 4.4%
putImageData / ms | fillRect / ms |
---|---|
40.8 | 1.99 |
23.7 | 0.95 |
20.0 | 0.94 |
19.8 | 0.81 |
10000次渲染結(jié)果:putImageData 效率是 fillRect 的 21%
putImageData / ms | fillRect / ms |
---|---|
48 | 6 |
51 | 22 |
37 | 7 |
55 | 7 |
100000次渲染結(jié)果: putImageData 效率是 fillRect 的 124%
結(jié)論
我們在繪制小方塊時,請務(wù)必選擇方法fillRect
颓哮。
putImageData
有類似重復(fù)執(zhí)行渲染的優(yōu)化家妆,故在大量渲染,或需要復(fù)雜彩色色塊渲染時才使用它冕茅。