html5如何修改画布颜色,根据渐变html5画布改变颜色

这种变化只是一个线性变化。

所以给了两种颜色

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