文章/答案/技术大牛

发布

社区首页 >问答首页 >用梯度html5画布改变颜色

问用梯度html5画布改变颜色
EN

Stack Overflow用户

提问于 2017-08-13 15:09:15

回答 1查看 198关注 0票数 1

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

当项目开始时，颜色应该是(2,254,253)。
项目结束时，它应该以(2,120,253)结尾。
随着项目的进展，所有的颜色都在中间。

这件事很容易做，因为我唯一需要改变的就是增加多少绿色。

但是我怎么能用任何2种颜色来做这件事呢？

canvas

colors

html5-canvas

javascript

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-13 16:53:10

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

所以给了两种颜色

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45661787

复制

相似问题

问用梯度html5画布改变颜色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用梯度html5画布改变颜色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用梯度html5画布改变颜色
EN