Html5 Canvas从一种颜色顺利过渡到另一种颜色

Question

有没有办法从一种颜色顺利过渡到另一种颜色？例如蓝色到红色。

我有一个循环125次的数组。

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

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

Answer 1

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

Answer 2

您还可以使用单独的叠加画布，一个是蓝色，另一个是红色。

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

这个画布示例随着时间的推移使天空变暗：

http://marketimpacts.squarespace.com/storage/9781118385357%20ls1201%20Fireworks%20Display.htm

这是示例中的代码片段：

// 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);
}