HTML5 Canvas 起步(3) - 颜色与渐变（2）

2. Canvas 中的渐变

WHATWG 的 Canvas 规范中规划了两种渐变模式，一种是线性渐变，另一种是径向渐变。如果需要在 Canvas 中使用渐变，首先要根据你所要创建的渐变模式来调用 Context 的相应方法来创建一个渐变对象，这个对象就是用来控制渐变的效果。

2.1 线性渐变

线性渐变使用 Canvas Context 的 createLinearGradient 方法创建，它的定义如下：

CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);

通过 (x0, y0) 与 (x1, y1) 指定渐变的开始位置与截止位置。当然，创建完线性渐变对象并不能完全开始使用渐变对象，你需要给它指定渐变的起始色以及终止色。CanvasGradient 对象有一个 addColorStop 方法用来添加颜色。

gradient.addColorStop(offset, color)

在线性渐变中，偏移量 offset 只能取 0 或 1，分别代表线性渐变的起始色和终止色。color 参数的值可以参考上面说明的颜色格式。

例如，我要创建一个从 (20, 20) 到 (150, 150) 的一个渐变，从绿色渐变到白色透明，就可以按照下面的代码来创建 CanvasGradient 对象：

var gradient = ctx.createLinearGradient(20, 20, 150, 150);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'rgba(255,255,255,0)');

创建完渐变对象后，可以直接将它赋值给 CanvasContext 的 fillStyle 属性或 strokeStyle 属性，用来指定填充的渐变色或画边框的渐变色。也就是说，CanvasGradient 对象的用法等同于颜色参数值，通过赋值给 Context 对象来起作用。

<script type="text/javascript">    var canvas = document.getElementById("canvas");    var ctx = canvas.getContext("2d");    // fill a rectangle whit sepecified fill style    function fillRect(color, x, y, h, w) {        ctx.fillStyle = color;        ctx.fillRect(x || 0, y || 0, h || 150, w || 100);        ctx.font = "10pt Arial";        ctx.fillStyle = "white";        ctx.fillText(color, 6, 20);    }    ctx.translate(0, 50);    // fill rect with color name    fillRect("green");    // 从绿色渐变到白色完全透明，并指定给填充色    var gradient = ctx.createLinearGradient(20, 20, 150, 150);    gradient.addColorStop(0, 'green');    gradient.addColorStop(1, 'rgba(255,255,255,0)');    ctx.translate(250, 0);    fillRect(gradient, -50, -50, 250, 200);    fillRect(gradient);        // 从白色到黑色的渐变，并指定给边框色    gradient = ctx.createLinearGradient(0, 0, 150, 100);    gradient.addColorStop(0, 'white');    gradient.addColorStop(1, 'black');    ctx.strokeStyle = gradient;    ctx.strokeRect(0, 0, 150, 100);</script>