根据渐变html5画布改变颜色

Question

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

• 项目开始时颜色应为（2,254,253）。
• 项目结束时应以（2,120,253）结束。
• 项目进展之间的所有颜色。

这个很容易做到，因为这里我唯一需要改变的是添加多少绿色。

但我怎么能用任何2种颜色做到这一点？

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,
]

如果您有一个以ms为单位的绝对时间，您可以按如下方式转换为标准化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] + ")";