javascript - 根据渐变html5 Canvas 改变颜色

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] + ")";