在HTML5画布中重新绘制彩色圆圈，将值存储在数组中或每次重新计算颜色的更好方法

Better approach to re-draw colorized circles in HTML5 canvas, store values in array or recalculate color every time?

本文关键字：计算 更好 方法 颜色 数组 新计算 新绘制 布中重 HTML5 绘制 彩色      更新时间：2023-09-26

我得到了几个对象，每个对象都有优先级值。优先级值可以介于 1（最低）到 200（最高）之间。
每个值都由一种颜色表示，最低值为绿色"rgba("0","255",0,1)";最高值为"rgba("255","0",0,1)";

我通过经典方程计算颜色值，其中每个优先级值确定不同的值（不同的颜色）。所以最后，根据优先级，我有可能获得从绿色（0）到黄色（100）到红色（200）的200种不同颜色的机会。

我的问题是：当我每 100 毫秒在画布上重绘所有对象时。是否最好每次计算这些值以获得所需的颜色，还是在初始化函数中仅生成一次 200 种颜色的数组，其中 array[100] 上的值将是优先级为 100 的对象的颜色。

我希望不会有太大的差异，但其中一种方法必须更好。

在几乎所有情况下，计算一次都是更好的选择（通常称为查找表）。内存比 CPU 周期便宜，这意味着消费类硬件具有大量 RAM，但始终需要周期。

在这种情况下，你是对的，

即使在16.666...ms（60fps）的全帧速率下，每100ms200种颜色也是微不足道的，但是客户端将在设备上运行许多应用程序/选项卡/服务，程序员为减少CPU负载所做的任何事情都将使客户端受益。

还有一个额外的好处是程序员往往会忘记。CPU 周期需要比内存多得多的功率。对于一台机器来说，增加几百万个周期并不算什么，但如果每个程序员都以降低整体负载的方式编写，那么全世界节省的电力是相当可观的。我现在要去拥抱一棵树，希望有帮助。

从问题中，我知道您不希望颜色的计算影响您的动画，请使用 Web worker 在单独的线程上运行您的计算 网络工作者
还有一件事 一次读取所有样式和一次写入样式 不要一起读/写，因为它可能会导致布局抖动 布局抖动

相关文章：