根据渐变html5画布更改颜色

Question

我有一个想成为纯色的背景，但是颜色会随着时间的推移而变化。

• 项目启动时，颜色应为（2,254,253）。
• 项目结束时，它应以（2,120,253）结尾。
• 随着项目的进行，介于两者之间的所有颜色。

这样做很容易，因为我要做的唯一更改就是添加多少绿色。

但是我该如何使用两种颜色呢？

Answer 1

这种变化只是线性变化。

所以给定两种颜色

var rgb1 = [100,200,10];
var rgb2 = [200,10,100];

时间t在0到1范围内的颜色

var colour = [
    ((rgb2[0] - rgb1[0]) * t + rgb1[0]) | 0, // the | 0  floors the value
    ((rgb2[1] - rgb1[1]) * t + rgb1[1]) | 0,
    ((rgb2[2] - rgb1[2]) * t + rgb1[2]) | 0,
]

如果您有绝对时间（以毫秒为单位），则可以按如下所示转换为归一化的t（0-1）

// do at start of time
startTime = performance.now();
endTime =  performance.now() + 10000;  // in ten seconds

// for each update
t = (performance.now() - startTime) / (endTime - startTime);
t = t > 1 ? 1 : t; // make sure you dont go past the end

// get the color
var colour = [
    ((rgb2[0] - rgb1[0]) * t + rgb1[0]) | 0, // the | 0  floors the value
    ((rgb2[1] - rgb1[1]) * t + rgb1[1]) | 0,
    ((rgb2[2] - rgb1[2]) * t + rgb1[2]) | 0,
]

// as a CSS colour
var cssColour = "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")";