使用Canvas绘图（6）--渐变

渐变由CanvasGradient实例表示，很容易通过2D上下文来创建和修改。要创建一个新的线性渐变，可以调用createLinearGradient（）方法。这个方法接收4个参数：起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient对象的实例。

创建了渐变对象后，下一步就是使用addColorStop()方法来指定色标。这个方法接收两个参数：色标位置和CSS颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字。例如：

var gradient=context.createLinearGradient(30,30,70,70);

gradient.addColorStop(0,"white");

gradient.addColorStop(1,"black");

此时，gradient对象表示的是一个从画布上点（30,30）到点（70,70）的渐变。起点的色标是白色，终点的色标是黑色。然后就可以把fillStyle或strokeStyle设置为这个对象，从而使用渐变来绘制形状或描边；

//绘制红色矩形

context.fillStyle="#ff0000";

context.fillRect(10,10,50,50);

//绘制渐变矩形

context.fillStyle=gradient;

context.fillRect(30,30,50,50);

为了让渐变覆盖整个矩形，而不是仅应用到矩形的一部分，矩形和渐变对象的坐标必修匹配才行。以上代码会得到如下结果：