html5渐变的两种方式,HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient...

今天又再看了html5的颜色渐变API，发现没有第一次看那么复杂。

不过我对这个颜色渐变存在着一个疑惑就是两种色带之间，那段是属于两种颜色混合的，有点模糊。

比如从红色变成黄色，在红与黄之间的那个地方，不会是纯色的红和黄，我一开始不是很明白，现在我是理解的：渐变颜色嘛，字面上的意思，就是渐变，在这两种颜色之间，由一种颜色渐变过渡到另一种颜色。

一、创建渐变颜色对象的步骤蛮简单的，线性渐变比径向渐变少了两个参数而已。具体步骤是这样的：

1、获取到你的canvas画布后，我们需要创建颜色渐变对象   var gradient

2、设置要渐变的颜色带   addColorStop(颜色带的所在点,"颜色")

3、将颜色渐变对象赋值给填充类型 fillStyle

4、进行绘制

ok了！

varmyCanvas=document.getElementById("myCanvas");varcontext=myCanvas.getContext("2d");vargradient=context.createLinearGradient(0,0,myCanvas.width,0);//创建颜色渐变对象

gradient.addColorStop(0,‘blue‘);//设置颜色停止点(过渡颜色所在位置)

gradient.addColorStop(0.25,‘white‘);

gradient.addColorStop(0.5,‘purple‘);

gradient.addColorStop(0.75,‘red‘);

gradient.addColorStop(1.0,‘yellow‘);

context.fillStyle=gradient;//把渐变对象赋值给填充类型

context.fillRect(0,0,myCanvas.width,myCanvas.height);//绘制图形

换个浏览器呗

varmyCanvas2=document.getElementById("myCanvas2");varcontext2=myCanvas2.getContext("2d");//var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height); //创建颜色径向渐变对象

vargradient2=context2.createRadialGradient(myCanvas2.width/2,myCanvas2.height/2,0,myCanvas2.width/2,myCanvas2.height/2,100);//创建颜色径向渐变对象(一个圆从中间向四周径向渐变)

gradient2.addColorStop(0,‘blue‘);//设置颜色停止点(过渡颜色所在位置)

gradient2.addColorStop(0.25,‘white‘);

gradient2.addColorStop(0.5,‘purple‘);

gradient2.addColorStop(0.75,‘red‘);

gradient2.addColorStop(1.0,‘yellow‘);

context2.fillStyle=gradient2;

context2.fillRect(0,0,myCanvas2.width,myCanvas2.height);

两种颜色渐变函数的参数说明：context.createLinearGradient(x0,y0,x1,y1);

参数

描述

x0

渐变开始点的 x 坐标

y0

渐变开始点的 y 坐标

x1

渐变结束点的 x 坐标

y1

渐变结束点的 y 坐标

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

参数

描述

x0

渐变的开始圆的 x 坐标

y0

渐变的开始圆的 y 坐标

r0

开始圆的半径

x1

渐变的结束圆的 x 坐标

y1

渐变的结束圆的 y 坐标

r1

结束圆的半径

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 createLinearGradient()

方法、createRadialGrradient()方法。

注释：Internet Explorer 8 或更早的浏览器不支持 元素。

关于径向渐变，我自己觉得最简单的理解就是：

例如我们要径向渐变一个圆，从圆心往四周颜色渐变，那么圆心所在的那个圆的坐标就是(x1,y1)

r1=0，渐变的大圆的坐标(x2,y2) r2=r(r为圆的半径)。

这是上面径向渐变的代码的效果截图：

从圆心(blue)——>四周(yellow)

原文：http://www.cnblogs.com/wuyinghong/p/3660595.html