html中动画取色效果,Canvas中颜色过渡动画效果的实现

在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],