但是，在HTML5中的canvas属性却为我们提供了很好的解决方案，利用canvas在Javascript中一些接口，我们可以很轻易的做出我们想要的渐变效果。
在HTML5中主要有两种渐变方式，一种是沿着直线的渐变方式，我们称之为线性渐变；另一种是从一个点或圆沿着一个圆的半径向四周渐变的方式，我们称之为径向渐变。
下面分别来介绍这两种的渐变方式。
1.线性渐变
在HTML5中，有关于线性渐变的最主要的函数是createLinearGradient(x0,y0,x1,y1) ;
createLinearGradient(x0,y0,x1,y1) 创建一个沿直线从(x0,y0）到（x1,y1)进行渐变
我们可以利用createLinearGradient来创建一个线性渐变，我们来指定这个渐变的宽度为400像素，那么我们可以用如下的方式创建：
var a_canvas = document.getElementById("a"); //获取canvas元素节点 var context = a_canvas.getContext("2d"); //设置canvas元素节点 var my_gradient = createLinearGradient(0,0,400,0); //创建一个线性渐变
由于点（0,0）到点（400,0）是从左到右的，所以我们创建的渐变也会沿水平从左到右。
有了一个渐变对象之后，我们就需要定义渐变的颜色了，定义渐变的函数有addColor(per,color);
addColor(per,color); 定义一个渐变颜色， per表示开始渐变位置占渐变区域大小的百分比，为0-1之间的任意值，color为颜色样式。
那么接下来，我们定义两个渐变颜色，使得渐变区域从黄色到红色进行渐变，代码如下：
my_gradient.addColorStop(0,"#ff0"); //定义黄色渐变色 my_gradient.addColorStop(1,"#f00"); //定义红色渐变色
定义完了以后，这些渐变信息都只是存在了内存当中，并没有在canvas中显示出来，要让渐变产生实际的效果，我们需要设置canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形，比如一个矩形或者一条直线。所以，为了看到渐变效果，我们还需要以下代码：
context.fillStyle = my_gradient; //设置fillStyle为当前的渐变对象 context.fillRect(0,0,400,300); //绘制渐变图形
那么至此，一个线性渐变的图形便绘制出来了，在chrome中运行的结果如下：
假如你想实现一个上下的线性渐变的效果，那么你应该在调用createLinearGradient(x0,y0,x1,y1) 创建渐变的时候保证点（x0,y0),点(x1,y1)连成的直线为竖直直线，也就是x0=x1。当然你也可以实现对角线渐变的效果，只要(x0,y0) (x1,y1)组成一条对角线就可以了。创建上下渐变和对角线渐变的代码如下：
var my_gradient = context.createLinearGradient(0,0,0,300); // 创建上下渐变 var my_gradient = context.createLinearGradient(0,0,0,300); // 创建对角线渐变
2.径向渐变
在HTML5中，有关于线性渐变的最主要的函数是createRadiaGradient(x0,y0,r0,x1,y1,r1);
createRadiaGradient(x0,y0,r0,x1,y1,r1) 创建一个沿两个圆之间的锥面绘制渐变。前三个参数代表一个圆心为（x0,y0）半径为r0的开始圆，后三个参数代表圆心为（x1,y1）半径为r1的结束圆。
首先我们可以利用createLinearGradient来创建一个线性渐变，我们来指定这个渐变的宽度为400像素，那么我们可以用如下的方式创建：
var b_canvas = document.getElementById("b"); //获取canvas元素节点 context = b_canvas.getContext("2d"); //设置canvas元素节点 //创建一个径向渐变，从圆心为(160,120)半径为20的圆周开始沿着半径向圆心为(160120)半径为200的圆周进行径向渐变 my_gradient= context.createRadialGradient(160,120,20, 160,120,200);
创建完了之后，和线性渐变一样，我们同样需要定义渐变颜色，这一点和线性渐变毫无区别，比如，我们分别定义红色渐变色和蓝色渐变色：
my_gradient.addColorStop(0, "#f00"); //定义红色渐变色 my_gradient.addColorStop(1, "#00f"); //定义蓝色渐变色
同样地，定义完了以后，这些渐变信息都只是存在了内存当中，并没有在canvas中显示出来，要让渐变产生实际的效果，我们需要设置canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形，比如一个矩形，代码如下：
context.fillStyle = my_gradient; //设置fillStyle为当前的渐变对象 context.fillRect(0,0,400,300); //绘制渐变图形
至此，一个径向渐变的图形便绘制出来了，在chrome中运行的结果如下：
那么到此为止，HTML5当中的两种基本的渐变方式就给大家介绍完了。
demo演示地址：http://xiaowu.shnow.cn/html5/note2/index.html
后话：关于国内关于html5的技术文档真的少的可怜，html5在中国的发展，离不开广大的技术爱好者的支持，另外给出一份我个人觉得不错的html5技术文档，文档是日文版的，不过你可以通过谷歌翻译来方便的阅读这份文档 http://www.openspc2.org/HTML/appendix/canvas_param/index.html
最新评论