修改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 任務隊列中對（宏）任務進行排隊？ ）