HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient
今天又再看了html5的颜色渐变API，发现没有第一次看那么复杂。
不过我对这个颜色渐变存在着一个疑惑就是两种色带之间，那段是属于两种颜色混合的，有点模糊。
比如从红色变成黄色，在红与黄之间的那个地方，不会是纯色的红和黄，我一开始不是很明白，现在我是理解的：渐变颜色嘛，字面上的意思，就是渐变，在这两种颜色之间，由一种颜色渐变过渡到另一种颜色。
一、创建渐变颜色对象的步骤蛮简单的，线性渐变比径向渐变少了两个参数而已。具体步骤是这样的：
1、获取到你的canvas画布后，我们需要创建颜色渐变对象 var gradient
2、设置要渐变的颜色带 addColorStop(颜色带的所在点,"颜色")
3、将颜色渐变对象赋值给填充类型 fillStyle
4、进行绘制
ok了！
<body> <!-- 作者：1107989194@qq.com 时间：2014-04-12 描述：渐变色 linear radial --> <canvas id="myCanvas" width="300" height="150" style="border: 1px solid black"></canvas> <script> var myCanvas = document.getElementById("myCanvas"); var context = myCanvas.getContext("2d"); var gradient = 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); //绘制图形 </script> <!-- 作者：1107989194@qq.com 时间：2014-04-12 描述：径向渐变 --> <canvas id="myCanvas2" width="300" height="150" style="border: 1px solid black">换个浏览器呗</canvas> <script> var myCanvas2 = document.getElementById("myCanvas2"); var context2 = myCanvas2.getContext("2d"); //var gradient2 = context.createRadialGradient(0,0,myCanvas2.width,myCanvas2.width,myCanvas2.height,myCanvas2.height); //创建颜色径向渐变对象 var gradient2 = 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); </script> </body>
两种颜色渐变函数的参数说明：
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 或更早的浏览器不支持 <canvas> 元素。
关于径向渐变，我自己觉得最简单的理解就是：
例如我们要径向渐变一个圆，从圆心往四周颜色渐变，那么圆心所在的那个圆的坐标就是(x1,y1) r1=0，渐变的大圆的坐标（x2,y2） r2=r(r为圆的半径)。
这是上面径向渐变的代码的效果截图：
从圆心（blue）——>四周（yellow）