使用moveTo与lineTo路径绘制火柴人
接下来看一下除了arc方法以外，其他使用路径绘制图形时会使用到的方法。
moveTo(x,y)：不绘制，只是将当前位置移动到新的目标坐标（x,y）。
lineTo(x,y)：不仅将当前位置移动到新的目标坐标（x,y），而且在两个坐标之间画一条直线。
简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要注意的是，不管调用它们哪一个，都不会真正画出图形，因为还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。
下面再来看一个特殊的路径函数叫作closePath。这个函数的行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。
此时，可以在已有的路径中继续创建其他的子路径，或者随时调用beginPath重新绘制新路径并完全清除之前的所有路径。
【例17.4】下面将应用canvas的arc、moveTo、lineTo方法来绘制一个火柴人。
具体步骤如下。
（1）通过document.getElementById方法取得canvas元素，然后使用canvas对象的getContext方法来获得图形上下文，与此同时传入使用的“2d”的canvas类型，代码如下。
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
（2）创建一个300×300、背景为蓝色的画布，代码如下。
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 300, 300);
（3）使用图形上下文对象的act方法，创建“火柴人的头部”路径。这里是一个空心的，边框为3的红色圆形。其实现的代码如下。
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3;
context.arc(100, 50, 30, 0, Math.PI*2, true);
context.fill();
context.stroke();
（4）火柴人的头部绘制好以后，接下来绘制火柴人的脸部。这里主要是绘制红色的眼睛和嘴巴。当绘制面部的时候，需要再次使用beginPath方法。这主要是为了让脸部的路径与头部的路径分离开。脸部特征中嘴实现的代码如下。
context.beginPath();
context.strokeStyle = '#c00';
context.lineWidth = 3; context.arc(100, 50, 20, 0, Math.PI, false);
context.fill();
context.stroke();
（5）再创一个新的路径来绘制眼睛。先绘制左眼，也就是绘制一个圆形并通过fillStyle方法为其填充为红颜色，然后使用moveTo方法“抬起”画笔来绘制右眼。其眼睛实现的代码如下。
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();
（6）头部绘制完成后，接下来就是绘制身体的部分，主要是上肢和下肢的绘制。在绘制身体部分时，多次应用了moveTo和lineTo方法。具体实现的代码如下。
context.beginPath();
context.moveTo(100, 80);
context.lineTo(100, 180);
context.lineTo(75, 250); //绘制左腿
context.moveTo(100, 180);
context.lineTo(125, 250); //绘制右腿
context.moveTo(100, 90);
context.lineTo(75, 140); //绘制左胳膊
context.moveTo(100, 90);
context.lineTo(125, 140); //绘制右胳膊
context.stroke();
（7）最后关闭路径，路径创建完成后，使用图形上下文对象的closePath方法将路径关闭。因为绘制的火柴人的每一部分都是路径的一个独立的子路径，都能独立绘制。因此只要在结尾处关闭路径即可，无须调用fill方法或者stroke方法来执行绘制。 www.bilibili.com/video/BV1kR…
