HTML5 绘制图形【3】

绘制渐变图形

渐变是指在填充时从一种颜色慢慢过渡到另外一种颜色。

绘制线性渐变

绘制线性渐变时，需要使用到LinearGradient对象。使用图形上下文对象的createLinearGradient()方法创建该对象。该方法的定义如下：

context.createLinearGradient(xStart, yStart, xEnd, yEnd);

该方法有四个参数，前两个参数指定渐变起始点的横坐标和纵坐标，后两个参数指定渐变终点的横坐标和纵坐标。通过使用该方法，创建了一个使用两个坐标点的LinearGradient对象。然后使用addColorStop()方法进行设定，该方法的定义如下：

linearGradient.addColorStop(offset, color);

使用这个方法可以追加渐变的颜色。该方法使用两个参数：offset为所设定的颜色离开渐变起点的偏移量，该参数的值是一个范围在0到1之间的浮点值，渐变起始点的偏移量为0，渐变结束点的偏移量为1；color为绘制时使用的颜色。

因为是渐变，所以至少需要使用两次addColorStop()方法以追加两个颜色（开始颜色与结束颜色），可以追加多个颜色。

接着把fillStyle设定为LinearGradient对象，然后执行填充的方法，就可以绘制出渐变图形了。

Canvas.prototype.createLinearGradient = function(xStart, yStart, xEnd, yEnd) {
	return this.context.createLinearGradient(xStart, yStart, xEnd, yEnd);
};

Canvas.prototype.createRadialGradient = function(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd) {
	return this.context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);
};

$(function() {
	var canvas = new Canvas("draw");
	var g1 = canvas.createLinearGradient(0, 0, 0, 400);
	g1.addColorStop(0, 'rgb(255, 255, 0)');
	g1.addColorStop(1, 'rgb(0, 255, 255)');
	canvas.fillStyle(g1).fillRect(0, 0, 400, 400);
	var g2 = canvas.createLinearGradient(0, 0, 400, 0);
	g2.addColorStop(0, 'rgba(0, 0, 255, 0.5)');
	g2.addColorStop(1, 'rgba(255, 0, 0, 0.5)');
	var xy, r;
	for(var i = 0; i < 10; i++) {
		xy = i * 25;
		r = i * 10;
		canvas.beginPath().fillStyle(g2).arc(xy, xy, r, 0, 2 * Math.PI, true).closePath().fill();
	}
});		

绘制径向渐变

径向渐变是指沿着圆形的半径方向向外进行扩散的渐变方式。例如，在描绘太阳时，沿着太阳的半径方向向外扩散出去的光晕，就是一种径向渐变。使用图形上下文对象的createRadialGradient()方法绘制径向渐变，该方法的定义如下：

context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);

该方法使用六个参数，前三个参数为渐变开始圆的圆心坐标和半径，后三个参数为渐变结束圆的圆心坐标和半径。在这个方法中，分别指定了两个圆的大小与位置。从第一个圆的圆心处向外进行扩散渐变，一直扩散到第二个圆的外轮廓处。在设定颜色时，与纯属渐变相同，使用addColorStop()方法进行设定即可。同样也需要设定0到1之间的浮点数来作为渐变转折点的偏移量。使用示例如下：

$(function() {
	var canvas = new Canvas("draw");
	var g1 = canvas.createRadialGradient(400, 0, 0, 400, 0, 400);
	g1.addColorStop(0.1, 'rgb(255, 255, 0)');
	g1.addColorStop(0.3, 'rgb(255, 0, 255)');
	g1.addColorStop(1, 'rgb(0, 255, 255)');
	canvas.fillStyle(g1).fillRect(0, 0, 400, 400);
	var g2 = canvas.createLinearGradient(250, 250, 0, 250, 250, 400);
	g2.addColorStop(0.1, 'rgba(255, 0, 0, 0.5)');
	g2.addColorStop(0.7, 'rgba(255, 255, 0, 0.5)');
	g2.addColorStop(1, 'rgba(0, 0, 255, 0.5)');
	var xy, r;
	for(var i = 0; i < 10; i++) {
		xy = i * 25;
		r = i * 10;
		canvas.beginPath().fillStyle(g2).arc(xy, xy, r, 0, 2 * Math.PI, true).closePath().fill();
	}
});