1.6K

渐变

	IE	Firefox	Safari	Chrome	Opera	iPhone	Android
线性渐变	7.0+*	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
辐射渐变	9.0+	3.0+	3.0+	3.0+	10.0+	1.0+	1.0+
* IE 7.0 和 8.0 需要使用第三方 JS 库explorercanvas；IE9 原生支持。

在本部分前面的章节，你已经学习到如何使用纯色绘制矩形，如何使用纯色绘制直线。然而，形状和直线并不仅仅使用纯色。你可以使用任何渐变进行绘制。下面我们来看一个例子：

这是我们的一个<canvas>标记：

<canvas id="d" width="300" height="225"></canvas>

首先，我们需要获取这个<canvas>元素及其绘制上下文：

var d_canvas = document.getElementById("d");
var context = d_canvas.getContext("2d");

一旦我们获取其上下文，我们就可以开始定义渐变了。所谓渐变，就是两种或多种颜色之间的平滑过渡。绘制上下文支持两种类型的渐变：

1. createLinearGradient(x0, y0, x1, y1)从 (x0, y0) 到 (x1, y1) 沿一条直线绘制；
2. createRadialGradient(x0, y0, r0, x1, y1, r1)沿两个圆之间的圆锥进行绘制。前三个参数定义起始圆，圆心是 (x0, y0)，半径为 r0；后三个定义终止圆，圆心是 (x1, y1)，半径为 r1。

下面我们来绘制线性渐变。渐变可以是任意尺寸。这里，我们将其定义为300像素宽，同画布一样。

var my_gradient = context.createLinearGradient(0, 0, 300, 0);

因为 y 值（第二个和第四个参数）都是0，因此这个渐变将从左向右进行。

一旦我们有个渐变对象，我们就可以定义渐变色。渐变通常有两个或更多颜色作为渐变色。渐变色可以出现在渐变的任何位置。为添加渐变色，我们需要指定渐变色出现的位置，也就是渐变位置。渐变位置可以是0-1之间的任意值。

下面我们定义一个从黑到白的渐变：

my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");

仅仅定义渐变并不会真正绘制到画布上。你所定义的仅仅是位于内存中的一个对象而已。为了绘制渐变，你需要设置形状（例如矩形或者直线）的fillStyle属性为你刚刚创建的渐变对象。

context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

下面就是最终结果：

假设你需要从顶到底的一个渐变，当你按照前面所说的创建完渐变对象的时候，保持 x 值不变（也就是第一个和第三个参数），让 y 的值（第二和第四个参数）从0到画布高度即可。

var my_gradient = context.createLinearGradient(0, 0, 0, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

下面则是我们得到的结果：

当然，你也可以创建带有一定角度的渐变：

var my_gradient = context.createLinearGradient(0, 0, 300, 225);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);

来看看效果：