實驗
畫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ù)雜彩色色塊渲染時才使用它冕茅。
