在CSS3中,我们要想实现从A颜色到B颜色的过渡效果,是相当容易的,只要指定起止颜色,配合transition过渡或者animation动画都可以时间我们想要的效果。
但是,在中却没有这么简单,因为本质上是一个静态画布,要想实现颜色变化,需要JS去不断绘制,实现起来要比CSS实现麻烦很多。再加上颜色值本身就不一定是纯粹的数值,更增加了我们实现的难度。
本文就将通过多个案例,逐步深入,介绍一些在Canvas中的颜色处理技巧,有些技巧说不定会让你大开眼界。
Canvas颜色动画硬实现
所谓“硬实现”,就是不通过“奇巧淫技”,按照正常逻辑,一条路走到底的实现方式。
例如,我们要在中实现一个蓝色到红色的动画效果,思路如下:
1. 获取蓝色和红色的RGB色值;
2. 使用定时器,配合运动算法,R,G,B数值同时变化产生变色。
具体如何实现,可以参见这个案例。您可以狠狠地点击这里:颜色数值变化下的颜色动画demo
实现的效果如下GIF截图(上面是Canvas实现,下面是CSS3实现,方便效果对比):
完整JS代码如下:var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var width = canvas.width, height = canvas.height;
// 动画执行的帧数
var start = 0, frames = 200;
// 过渡颜色 蓝色 到 红色
var from = [0, 0, 255];
var to = [255, 0, 0];
// 动画算法,这里使用Cubic.easeOut算法
var cubicEaseOut = function(t, b, c, d) {
return c * ((t = t/d - 1) * t * t + 1) + b;
};
// 绘制方法
var draw = function () {
context.clearRect(0, 0, width, height);
// 计算此时r, g, b数值
var r = cubicEaseOut(start, from[0], to[0] - from[0], frames);
var g = cubicEaseOut(start, from[1],