问题描述
我们经常会玩一些小游戏会看一些动漫，而在游戏和动漫里面最常出现的形象就是火柴人。火柴人形象处理简单但却可以通过改变四肢做出百变的动作，接下来就和笔者一起来看看如何绘制一个简单的火柴人吧。
问题分析
火柴人，通过分析示例图可以发现，火柴人可以分成两部分组成：头部、身体。头部由圆形组合形成脑袋、眼睛和嘴巴；身体主要是直线组合形成四肢。所以接下来绘制一个大圆当脑袋，两个小圆眼睛，一个弧形当嘴巴和几条直线当身体。
图1 火柴人示例图
需要用代码来实现火柴人的绘制，在这里可以用html5 canvas标签来绘制火柴人，但canvas标签本身没有绘制图形的能力，它只能作为图形的容器，简单的来说就是日常画画用的画布，还需要画画的画笔，即脚本来完成绘图，在这里选择canvas标签+JavaScript脚本来完成整体的绘制。
解决方案及效果
1）定义画布canvas。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>火柴人</title> </head> <body> <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"> </canvas> </body> </html> |
图2 定义画布效果图
定义画布的示例代码中，用id表示画布的对象名称，用width、height直接设置画布的大小，为了方便展示画布，给画布添加了border: 1px，使得可以看见画布的边界。
2)绘制头部大圆形
<script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.beginPath(); cxt.arc(100,50,40,0,Math.PI*2,true); cxt.closePath(); cxt.fillStyle="blank"; cxt.fill(); </script> |
图3 大圆效果图
通过运用JavaScript绘制一个圆形。在arc函数中，前两个参数表示圆的x,y轴坐标，第三个参数表示圆的半径（单位为像素），第四和第五两个参数为弧度的开始和结束，最后一个参数表示绘制的弧形的方向（顺时针方向/逆时针方向）。所以在这里绘制了一个坐标为（100，50），半径为40像素的圆形。
3）绘制表情
/*眼睛*/ cxt.beginPath(); cxt.fillStyle="white"; cxt.arc(90,45,3,0,Math.PI*2,true); cxt.fill(); cxt.moveTo(113,45); cxt.arc(110,45,3,0,Math.PI*2,true); cxt.fill(); cxt.stroke(); /*嘴巴*/ cxt.beginPath(); cxt.strokeStyle = 'white'; cxt.lineWidth = 3; cxt.arc(100,50,20,0,Math.PI,false); cxt.stroke(); |
图4 脸部表情效果图
绘制眼睛时，要使用beginPath()的方法重新开始绘制形状。然后再填充弧线，用arc函数绘制左眼，最后再使用moveTo()绘制右眼。
绘制嘴巴时，同样要先用beginPath()的方法重新开始绘制形状，用stroke()设置边框，lineWidth()设置线条宽度，然后绘制一个弧形形成嘴巴。
4）绘制四肢
/*四肢*/ cxt.beginPath(); cxt.moveTo(100,80); cxt.lineTo(100,150); cxt.moveTo(100,100); cxt.lineTo(60,120); cxt.moveTo(100,100); cxt.lineTo(140,120); cxt.moveTo(100,150); cxt.lineTo(80,190); cxt.moveTo(100,150); cxt.lineTo(140,190); cxt.lineWidth="10"; cxt.strokeStyle="black"; cxt.stroke(); |
图5 四肢（整体）效果图
四肢相对就很简单，只需要设置直线的moveTo()开始坐标和lineTo()结尾坐标，绘制不同的直线，使这些直线最后连在一起形成四肢即可。
结语
canvas和JavaScript结合真是个神奇的东西，可以根据自己的想象通过代码的形式绘制出一幅画来。当然想要运用画布的话，就必须要熟练的掌握相关的属性方法和脚本函数，才能画出理想中的图案来。
