Canvas 2D的性能警告willReadFrequently(非必要情况下不传true，严重影响渲染效率)

这是 Canvas 2D API 的一个优化点。

在创建 CanvasRenderingContext2D 时，可以传入一个配置对象：

const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d", { willReadFrequently: true });

含义

• willReadFrequently: true 告诉浏览器：你打算频繁地使用 getImageData()、putImageData() 或者访问 canvas 像素数据。

• 浏览器就会选择一种更适合读写的内部存储方式（比如避免 GPU-only 的存储，转而使用 CPU 内存缓冲区），从而加快像素操作。

适用场景

• 热力图渲染（需要频繁读写像素）

• 图像处理（滤镜、像素级计算）

• 需要频繁 getImageData / putImageData 的应用

注意事项

• 设置 willReadFrequently: true 可能会 降低硬件加速的优化（因为像素数据放在 CPU 内存中，绘制到屏幕可能稍慢）。

• 如果只是绘制图形，而不需要频繁读写像素，则不需要设置。