Dive Into HTML5:绘图(续三)

渐变

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);

来看看效果:


Leave a Reply