Javascript js canvas-高效多点梯度

我试图在画布上显示多点渐变。此多点渐变使用许多（数千）点。它应该生成213x144图像。此过程应少于3秒

graident的点如下所示：

const points=[
{value:[255,0,0]，x:10，y:10}，
{value:[120,0,60]，x:34，y:16}，
{value:[16230,1]，x:120，y:112}
];

这些点始终位于像素的精确位置

我尝试使用CPU计算解决所解释的问题：

const ctx=canvas.getContext（'2d'）；
常量大小={宽度：213，高度：144，长度：30672‬};
for（设i=0；i

不幸的是，这需要几秒钟的时间（当用6000点进行测试时），即使我将其设置为多线程（不会提供代码，因为它不必要而且太长）

我搜索了一个硬件加速的解决方案，但如果找到的话，唯一的解决方案是，答案只会产生一个非常不准确的图像，因为后来添加的梯度非常重要

有没有人知道如何使CPU计算更快，或者是否有（适当的）硬件加速解决方案

---

（代码不需要向后兼容）

在我看来，代码的最后3行是性能杀手。（即使有更大的代码，这段代码也有点混乱）看看画布像素操作-这似乎是一个合理的介绍：代码的最后3行在我看来是性能杀手。（即使有一个更大的，这段代码有点混乱）看看画布像素操作-这似乎是一个合理的介绍：