Canvas context 方法 putImageData 和

实验

画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次渲染结果：putImageData 效率是 fillRect 的 3.3%

1000次渲染结果：putImageData 效率是 fillRect 的 4.4%

10000次渲染结果：putImageData 效率是 fillRect 的 21%

100000次渲染结果： putImageData 效率是 fillRect 的 124%

结论

我们在绘制小方块时，请务必选择方法fillRect。

putImageData有类似重复执行渲染的优化，故在大量渲染，或需要复杂彩色色块渲染时才使用它。