一、在画布中使用路径
beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
stroke()
通过线条来绘制图形轮廓
fill()
通过填充路径的内容区域生成实心的图形
1.使用arc方法绘制圆形
要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行如下步骤。
开始创建路径
使用图形上下文对象的beginPath()方法，该方法的定义如下所示：
context.beginPath()//该方法不使用参数。通过调用该方法，开始路径的创建。
创建图像的路径
使用图形上下文对象的act方法。该方法的定义如下所示。
context.arc(x,y,radius, startAngle, endAngle,anticlockwise)
该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius
为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否
按顺时针方向进行绘制。在canvas API中，绘制半径与弧时指定的参数为开始弧度与
结束弧度，如果习惯使用角度，请使用如下所示的方法将角度转换为弧度。
var radians =degrees*math.PI/180
其中math.PI表示角度为180度，math.PI*2表示角度为360度。
arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。因此，使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。Anticlockwise参数为一个布尔值的参数，参数值为true时，按顺时针绘制；参数值为false时，按逆时针方向绘制。
关闭路径
路径创建完成后，使用图形上下文对象的closePath方法将路径关闭。该方法定义如下
所示。
context.closePath();
将路径关闭后，路径的创建工作就完成了，但是需要注意的是，这时只是路径创建完毕
而已，还没有真正绘制图形。
进行圆形绘制，并设定绘制样式。实现的代码如下所示。
context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill();
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素arc示例</title>
<script language="JavaScript">
function draw(id)
{
var canvas = document.getElementById(id);
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 200, 200);
context.beginPath();
context.arc( 100, 100,50, 0, Math.PI*2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
}
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas中画圆形</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
2. 使用moveTo与lineTo路径绘制火柴人
moveTo（x，y）：不绘制，只是将当前位置移动到新的目标坐标（x，y）。
lineTo（x，y）：不仅将当前位置移动到新的目标坐标（x，y），而且在两个坐标之间画一条直线。
简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要提醒大家注意的是，不管调用它们哪一个，都不会真正画出图形，因为我们还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。
我们再来看一个特殊的路径函数叫做closePath。这个函数的行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为
目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script >
function draw(id)
{
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 300, 300);
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 30, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 20, 0, Math.PI, false);
context.fill();
context.stroke();
context.beginPath();
context.fillStyle = '#c00';
context.arc(90, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.moveTo(113, 45);
context.arc(110, 45, 3, 0, Math.PI*2, true);
context.fill();
context.stroke();
context.beginPath();
context.moveTo(100, 80); // move to neck
context.lineTo(100, 180); // body
context.lineTo(75, 250); // 绘制左腿
context.moveTo(100, 180); // move to hips
context.lineTo(125, 250); // 绘制右腿
context.moveTo(100, 90); // move to shoulders
context.lineTo(75, 140); // 绘制左胳膊
context.moveTo(100, 90); // back to shoulders
context.lineTo(125, 140); // 绘制右胳膊
context.stroke();
}
context.closePath();
</script>
</head>
<body onload="draw('canvas');">
<h1>canvas中绘制火柴人</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
3. 贝塞尔和二次方曲线
绘制贝塞尔曲线主要使用bezierCurveTo方法。该方法可以说是lineTo的曲线版，将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如下所示。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
该方法使用六个参数。绘制贝塞尔曲线的时候，需要两个控制点
，cp1x为第一个控制点的横坐标，cp1y为第一个控制点的纵坐
标；cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵
坐标；x为贝塞尔曲线的终点横坐标，y为贝塞尔曲线的终点纵坐标。
绘制二次样条曲线，使用的方法是quadraticCurveTo。该方法的定义如下所示。
quadraticCurveTo(cp1x, cp1y, x, y)
两种方法的区别如下图所示。它们都是一个起点一个终点（图中
的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而
三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和
cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。
