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