使用画布函数在JavaScript画布中混合颜色

我有一个带有对象的HTML

，我正在尝试为它的颜色设置动画

例如，我可能希望从

rgb（255，240，100）

到

rgb（255，255，255）

设置动画。虽然可以通过一些字符串处理和连接来计算中间颜色，但我试图避免这种情况，因为将特殊构造的字符串指定为

fillStyle

似乎比将

fillStyle

设置为特定值（至少在Chrome中）慢得多

---

有没有办法，通过使用诸如

globalCompositionOperation

或其他方法来避免连接我的颜色字符串？

下面是一个绘制正方形并淡出其填充颜色的工作示例。
它在两个颜色值之间插值，我认为结果非常平滑。
也许其他因素会降低动画的性能

函数getColorStr（r1、g1、b1、r2、g2、b2、pct）{ var rn=数学四舍五入（（1-pct）*r1+pct*r2）， gn=数学圆整（（1-pct）*g1+pct*g2）， bn=数学四舍五入（（1-pct）*b1+pct*b2）； 返回“rgb（'+rn+'、'+gn+'、'+bn+'）” } var canvas=document.getElementById（'canvas'）； var ctx=canvas.getContext（'2d'）； var cW=画布宽度， cH=画布高度； var color1=[255，240，100]， 颜色2=[255,255,255]； var CycleleLength=2； var-cyclePct=0； var lastTs=Date.now（）； ctx.fillStyle='白色'； ctx.fillRect（0，0，cW，cH）； 请求动画帧（绘制）； 函数绘图（）{ var now=Date.now（）； var dt=（现在-lastTs）/1000；//秒 cyclePct+=dt/循环长度； 如果（cyclePct>1）cyclePct=0； lastTs=现在； var color=getColorStr（color1[0]，color1[1]，color1[2]，color2[0]，color2[1]，color2[2]，cyclePct）； ctx.fillStyle=颜色； ctx.fillRect（10,10,50,50）； 请求动画帧（绘制）； }

---

使用字符串连接构建颜色值并没有那么慢。你到底是怎么做的？类似于

返回“rgb（“+Math.round（color\u arr[0]）.toString（）+”，“+Math.round（color\u arr[1]）.toString（）+”，“+Math.round（color\u arr[2]）.toString（）+”。它对我来说已经足够好了，但是我想知道我是否可以做得更好。首先，你不需要调用
.toString（）
。如果在问题中发布代码，则更容易判断。