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

如果您在毫秒的绝对时间可以转换为标准的牛逼（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] + ")";