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