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