Question

我正在编写一个程序，通过使用它们为画布上的每个像素生成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>

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

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

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>

如何在Javascript中更快地在画布上进行像素操作

1 个答案: