HTML5 绘制图形【2】
使用路径绘制圆形
要想绘制其他图形，需要使用路径。同样的，绘制开始时还是要取得图形上下文，然后需要执行如下步骤：
也就是说，首先使用路径来勾勒图形轮廓，然后设置颜色，进行绘制。
开始创建路径首先，使用图形上下文对象的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();}});如果没有关闭路径会怎么样如果把上例中开始创建路径语句与关闭路径这一语句删除，会绘制出怎样的图形？试验后的结果表明，在画布中先是绘制一个深红色的半径最小的圆，然后每次半径变大的同时，圆的颜色仿佛也在逐渐变淡。
循环时的具体绘制过程如下：
如果不关闭路径，已经创建的路径会永远保留着。就算用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);
相对来说，二次样条曲线的绘制比贝济埃曲线的绘制容易一些，因为只要设置二次样条曲线只有一个控制点和曲线终点坐标即可。