javascript - 插值 RGB 颜色

标签 javascript html canvas

我正在考虑如何在给定 start_timeend_timestart_colorend_color 的情况下插值颜色>。为简单起见,以下是我考虑如何仅使用红色组件来完成此操作的示例:

start_time = 0
end_time = 1
start_color = F //base 16 ftw
end_color = 0

我可以看到,在时间 0.5 时,red_out 应该是 8。这将是从亮红色渐变到黑色的中间过程。

那么是time_elapsed * start_color吗?但如果它以相反的方式褪色,从黑色变成鲜红色怎么办?这就是我感到困惑的地方。

最佳答案

对于每个颜色分量,您必须使用以下公式(没什么神奇的):

color = time_elapsed * (end_color - start_color) / (end_time - star_time)

关于javascript - 插值 RGB 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3450236/

相关文章:

html - 在响应式网格上设置多个 “same height” 行部分的仅 CSS 解决方案

html - 除了绘画类型程序之外,html5 Canvas 实际上还有什么用处?

javascript - PhantomJS 呈现模糊的 Chart.js Canvas

javascript - 如何使用 javascript 或 jquery 获取全局时间(不是电脑时间)?

html - CSS 嵌套下拉菜单向右打开

html - 如何使用 CSS 创建一个带有渐变颜色的 3D 长方体

javascript - HTML5 Canvas : How to enumerate all objects

javascript - 如何知道窗口 "load"事件是否已经触发

javascript - 在没有 Date 对象的情况下在 Javascript 中操作日期

javascript - Ng-Repeat 改变变量