Html5 Canvas Плавный переход от одного цвета к другому

Question

Есть ли способ плавно перейти от одного цвета к другому? Например, от синего до красного.

У меня есть массив, который будет охватывать 125 раз.

Внутри этого массива я хочу перейти от синего до красного.

Должен ли я иметь 125 различных значений цвета в своем собственном массиве, а затем выбирать каждый из них по мере прохождения индекса?

Answer 1

Используйте hsl вместо rgb или шестнадцатеричного кода. Вам нужно будет только изменить первый параметр функции, который является Hue, и имеет целочисленное значение.

Answer 2

Вы также можете использовать отдельные накладные холсты, один с синим цветом, а другой с красным.

Затем вы можете изменить прозрачность (глобальную альфу) каждого холста с течением времени в своей анимационной функции, чтобы одно холст переместился в 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); 
}