我正在编写一个程序,通过使用它们为 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 。
如何使这些像素操作更快?
最佳答案
如果您只使用一种颜色,您可以通过在循环之前设置 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 - 如何在 Javascript 中更快地在 Canvas 上进行像素操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56822116/