HTML5 绘制图形【2】

使用路径

绘制圆形

要想绘制其他图形，需要使用路径。同样的，绘制开始时还是要取得图形上下文，然后需要执行如下步骤：

1. 开始创建路径；
2. 创建图形的路径；
3. 路径创建完成后，关闭路径；
4. 设定绘制样式，调用绘制方法，绘制路径。

也就是说，首先使用路径来勾勒图形轮廓，然后设置颜色，进行绘制。

开始创建路径

首先，使用图形上下文对象的beginPath()方法，该方法的定义如下：

context.beginPath();

该方法不使用参数。通过调用该方法，开始路径的创建。

创建圆形路径

创建圆形路径时，需要使用图形上下文对象的arc()方法。该方法的定义如下：

context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

该方法使用六个参数，前两个参数表示圆形的起点坐标的，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。在Canvas API中，绘制半径与弧时指定的参数为开始弧度与结束弧度，如果喜欢使用角度，使用如下方法将角度转换为弧度：

var radians = degress * Math.PI / 180;

arc()方法不仅可以用来绘制圆形，也可以用来绘制圆弧。因此，使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。anticlockwise参数为一个布尔值，为true时按顺时针绘制；为false时按逆时针方向绘制。

关闭路径

路径创建完成后，使用图形上下文对象的closePath()方法将路径关闭，该方法定义如下：

context.closePath();

将路径关闭后，路径的创建工作就完成了，但是请注意，这时只是路径创建完毕而已，还没有真正绘制任何图形。

设定绘制样式，进行图形绘制

使用创建好的路径绘制图形。在指定绘制样式时，与绘制矩形的方法一样，使用fillStyle属性和strokeStyle属性。绘制图形的时候，使用fill()方法或stroke()方法。这两个方法的功能分别为“填充图形”与“绘制图形边框”。因为路径已经决定了图形的大小，所以就不需要在该方法中使用参数来指定图形的大小了。示例如下：

function Canvas(id) {
	this.id = id;
	this.canvas = document.getElementById(id);
	this.context = this.canvas.getContext('2d');
}

Canvas.prototype.fillStyle = function(style) {
	this.context.fillStyle = style;
	return this;
};

Canvas.prototype.strokeStyle = function(style) {
	this.context.strokeStyle = style;
	return this;
};

Canvas.prototype.lineWidth = function(width) {
	this.context.lineWidth = width;
	return this;
};

Canvas.prototype.beginPath = function() {
	this.context.beginPath();
	return this;
};

Canvas.prototype.closePath = function() {
	this.context.closePath();
	return this;
};

Canvas.prototype.arc = function(x, y, radius, startAngle, endAngle,	anticlockwise) {
	this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
	return this;
};

Canvas.prototype.fill = function() {
	this.context.fill();
	return this;
};

Canvas.prototype.stroke = function() {
	this.context.stroke();
	return this;
};

$(function() {
	var canvas = new Canvas($("canvas").attr("id"));
	canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400);
	var xy, r;
	for(var i = 0; i < 10; i++) {
		xy = i * 25;
		r = i * 10;
		canvas.beginPath().arc(xy, xy, r, 0, 2 * Math.PI, true).closePath().fillStyle('rgba(255, 0, 0, 0.25)').fill();
	}
});		

如果没有关闭路径会怎么样

如果把上例中开始创建路径语句与关闭路径这一语句删除，会绘制出怎样的图形？试验后的结果表明，在画布中先是绘制一个深红色的半径最小的圆，然后每次半径变大的同时，圆的颜色仿佛也在逐渐变淡。

循环时的具体绘制过程如下：

1. 创建并且绘制第一个圆。
2. 创建第二个圆。这时，因为没有把第一个绘制圆的路径给关闭掉，所以第一个圆的路径也保留着。绘制第二个圆的时候，第一个圆会根据该路径重复绘制，第二个圆只绘制一次，而第一个圆绘制了两次。
3. 创建第三个圆。绘制时，第三个圆绘制一次，第二个圆绘制两次，第一个圆绘制三次。
4. 同上……

如果不关闭路径，已经创建的路径会永远保留着。就算用fill()方法与stroke()方法在页面上将图形已经绘制完毕，路径都不会消失。因此，如果把“使用路径进行绘制”这个方法进行循环，创建的图形会一次又一次地进行重叠。所以，如果不仔细对路径进行管理的话，会绘制出意想不到的图形。当然，也可以利用这一特点绘制出有趣的图形，更加漂亮的图形。所以，只创建一次，而重叠绘制也会得到广泛的应用。因此，在进行绘制的时候，还是要仔细计算好路径从哪里开始，在哪里关闭。

示例代码如下：

$(function() {
	var canvas = new Canvas($("canvas").attr("id"));
	canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400);
	var xy, r;
	for(var i = 0; i < 10; i++) {
		xy = i * 25;
		r = i * 10;
		canvas.arc(xy, xy, r, 0, 2 * Math.PI, true).fillStyle('rgba(255, 0, 0, 0.25)').fill();
	}
});		

moveTo()与lineTo()

绘制直线时，一般会用到这两个方法，其中：

• moveTo()方法的作用是将光标移动到指定坐标点，绘制直线时以这个坐标点为起始坐标点，两个参数分别是坐标点的横坐标和纵坐标;
• lineTo()方法在moveTo()方法中指定直线起点与参数中指定的直线终点之间绘制一条直线，使用该方法绘制完直线后，光标自动移动到lineTo()方法的参数所指定的直线终点，这两个方法的定义如下：

context.moveTo(x, y);
context.lineTo(x, y);

在创建路径时，需要使用moveTo()方法将光标移动到指定的直线起点，然后使用lineTo()方法在直线起点与直线终点之间创建路径，然后将光标移动到直线终点，在下一次使用lineTo()方法的时候，会以当前光标所在坐标点为直线起点，并在下一个用lineTo()方法指定的直线终点间创建路径，它会不断重复这个过程，来完成复杂图形的路径绘制。使用示例如下：

Canvas.prototype.moveTo = function(x, y) {
	this.context.moveTo(x, y);
	return this;
};

Canvas.prototype.lineTo = function(x, y) {
	this.context.lineTo(x, y);
	return this;
};

$(function() {
	var canvas = new Canvas($("canvas").attr("id"));
	canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400);
	var dx = 150, dy = 150, s = 100, dig = Math.PI / 15 * 11, x, y;
	canvas.beginPath().fillStyle('rgb(100, 255, 100)').strokeStyle('rgb(0, 0, 100)');
	for(var i = 0; i < 30; i++) {
		x = Math.sin(i * dig);
		y = Math.cos(i * dig);
		canvas.lineTo(x * s + dx, y * s + dy);
	}
	canvas.closePath().fill().stroke();
});		

使用bezierCurveTo()绘制贝济埃曲线

绘制贝济埃曲线时，需要使用bezierCurveTo()方法。该方法可以说是lineTo()方法的曲线版本，将从当前坐标点到指定坐标点中间的贝济埃曲线追加到路径中，该方法的定义如下：

context.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);

该方法使用六个参数。绘制贝济埃曲线的时候需要两个控制点，第一个控制点的坐标由前两个参数设置，第二个控制点的坐标由中间两个参数设置，最后两个参数设置贝济埃曲线的终点坐标。使用示例如下：

Canvas.prototype.bezierCurveTo = function(x1, y1, x2, y2, x, y) {
	this.context.bezierCurveTo(x1, y1, x2, y2, x, y);
	return this;
};

Canvas.prototype.quadraticCurveTo = function(cpx1, cpy1, x, y) {
	this.context.quadraticCurveTo(cpx1, cpy1, x, y);
	return this;
};

$(function() {
	var canvas = new Canvas($("canvas").attr("id"));
	canvas.fillStyle("#EEEEFF").fillRect(0, 0, 400, 400);
	var dx = 150, dy = 150, s = 100, dig = Math.PI / 15 * 11, x, y, cpx1, cpy1, cpx2, cpy2;
	canvas.beginPath().fillStyle('rgb(100, 255, 100)').strokeStyle('rgb(0, 0, 100)').moveTo(dx, dy);
	for(var i = 0; i < 30; i++) {
		x = Math.sin(i * dig) * s + dx;
		y = Math.cos(i * dig) * s + dy;
		cpx1 = x;
		cpy1 = y - 100;
		cpx2 = x + 100;
		cpy2 = y;
		canvas.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y);
	}
	canvas.closePath().fill().stroke();
});		

另外，除了可以在canvas画布中绘制贝济埃曲线，还可以使用quadraticCurveTo()方法绘制二次样条曲线，该方法定义如下：

context.quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);

相对来说，二次样条曲线的绘制比贝济埃曲线的绘制容易一些，因为只要设置二次样条曲线只有一个控制点和曲线终点坐标即可。