Javascript Html5画布从一种颜色平滑过渡到另一种颜色

有没有办法从一种颜色平滑过渡到另一种颜色？例如蓝色到红色

我有一个循环125次的数组

在这个数组中，我想将颜色从蓝色转换为红色

---

我是否必须在自己的数组中有125个不同的颜色值，然后在索引循环时选择每个颜色值？

使用hsl而不是rgb或十六进制代码。您只需更改函数的第一个参数，即色调，并具有整数值。

您还可以使用单独的重叠画布，一个为蓝色，另一个为红色

然后，可以在动画功能中随时间更改每个画布的透明度（全局alpha），以便一个画布变为0，另一个画布变为100%透明度

此画布示例随时间变暗天空：

这是示例中的代码片段：

// F1. SUNSET increment & check for change.
skyInterval = sunset*sunsetFactor;
skyCount    = skyCount + interval;
if(skyCount > skyInterval) 
{
  // F2. SKY ALPHA increase if reached skyInterval.
  skyAlpha = skyAlpha + .01;
  if(skyAlpha > 1) {skyApha = 1}
  skyCount = 0;

  // F3. SKY alpha setting.
  contextSK.globalAlpha = skyAlpha;
  if(skyNight == 1) {contextSK.globalAlpha = 1}

  // F4. SKY gradient.
  var skyGrad = contextSK.createLinearGradient(0, 0, 0, canvasSK.height-sunsetHorizon);
  skyGrad.addColorStop( 0, "black");
  skyGrad.addColorStop(.8, "black");
  skyGrad.addColorStop( 1, "transparent");

  // F5. SKY fill.
  contextSK.fillStyle = skyGrad;
  contextSK.clearRect(0, 0, canvasSK.width, canvasSK.height);
  contextSK.fillRect( 0, 0, canvasSK.width, canvasSK.height);
}