修改canvas 不冻结浏览器（异步绘图）

Question

是否可以在不冻结浏览器的情况下绘制 canvas 元素？ 我正在打印大约。 3.000.000 点，这让我的浏览器冻结了 2-3 秒。

谢谢！

这就是循环中发生 300 万次的情况

for (var m = 0; m <= data.length - 1; m++) {
   ....
   ctx_raw.beginPath();
   ctx_raw.fillStyle = DATA_CONFIG.color;
   ctx_raw.fillRect(x_value, y_value, 1, 1);
}

---

编辑 1：Chris G 的改进效率提高了 30%

const image_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = image_data;

var index = (x_value + y_value * canvas.width) * 4;

data[index ] = 0;
data[index + 1] = 0;
data[index + 2] = 0;
data[index + 3] = 255;

Answer 1

你可以：

1. 创建一个Worker ，它将在单独的 CPU 线程中运行（如果可用），
2. （可选）使用.postMessage()向工作人员发送参数，
3. 使用OffscreenCanvas渲染工作人员内部的图像，
4. 使用.getImageData()提取像素数据，
5. 使用.postMessage()将数据发送到Window （主线程），
6. 接收Window上的数据并使用.putImageData()将其渲染到<canvas>上。

另一种选择是将渲染分成几个事件循环任务。 （请参阅如何在 JavaScript 任务队列中对（宏）任务进行排队？ ）