javascript - 如何在 Javascript 中更快地在 Canvas 上进行像素操作

Question

我正在编写一个程序，通过使用它们为 Canvas 上的每个像素生成 RGB 值，将三个方程转换为图像。这是我第一次测试的代码:

const canvas = document.getElementById("game")
const context = canvas.getContext("2d")

time = new Date()

canvas.width = 500
canvas.height = 500

for (x = 0; x < canvas.width; x++) {
  for (y = 0; y < canvas.height; y++) {
    context.fillStyle = "red"
    context.fillRect(x, y, 1, 1)
  }
}

console.log(new Date() - time)

<canvas id="game"></canvas>

但是，当我运行这段代码时，生成 Canvas 需要几秒钟的时间。我添加了一种基本方法来查看代码运行需要多长时间，控制台显示它只需要 200 毫秒。我不知道为什么它说它只需要 200 毫秒，因为我直到控制台日志后几秒钟才看到 Canvas 。

如何使这些像素操作更快？

Answer 1

如果您只使用一种颜色，您可以通过在循环之前设置 fillStyle 而不是每次迭代都设置它来加快速度。但是，如果您想为不同的像素设置不同的颜色，这显然行不通。

您还可以在 imageData 中设置颜色对象，然后用 putImageData 一次绘制它.这对我来说在 Chrome 和 Firefox 中都快得多。

const canvas = document.getElementById("game")
const context = canvas.getContext("2d")

time = new Date()

canvas.width = 500
canvas.height = 500

let imageData = context.createImageData(canvas.width, canvas.height)
let data = imageData.data;
let i = 0;
while (i < data.length) {
  data[i++] = 255; // Red value
  data[i++] = 0; // Green value
  data[i++] = 0; // Blue value
  data[i++] = 255; // Alpha (opacity)
}
context.putImageData(imageData, 0, 0)
console.log(new Date() - time)

<canvas id="game"></canvas>