前端基础_使用moveTo与lineTo路径绘制火柴人

使用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.getCo