今天又再看了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）
HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient
