问题描述

我们经常会玩一些小游戏会看一些动漫，而在游戏和动漫里面最常出现的形象就是火柴人。火柴人形象处理简单但却可以通过改变四肢做出百变的动作，接下来就和笔者一起来看看如何绘制一个简单的火柴人吧。

问题分析

火柴人，通过分析示例图可以发现，火柴人可以分成两部分组成：头部、身体。头部由圆形组合形成脑袋、眼睛和嘴巴；身体主要是直线组合形成四肢。所以接下来绘制一个大圆当脑袋，两个小圆眼睛，一个弧形当嘴巴和几条直线当身体。

前端|画个火柴人_代码

图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>

前端|画个火柴人_代码_02

图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>

前端|画个火柴人_代码_03

图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();

前端|画个火柴人_代码_04

图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();

前端|画个火柴人_代码_05

图5 四肢（整体）效果图

四肢相对就很简单，只需要设置直线的moveTo()开始坐标和lineTo()结尾坐标，绘制不同的直线，使这些直线最后连在一起形成四肢即可。

结语

canvas和JavaScript结合真是个神奇的东西，可以根据自己的想象通过代码的形式绘制出一幅画来。当然想要运用画布的话，就必须要熟练的掌握相关的属性方法和脚本函数，才能画出理想中的图案来。

END

            

前端|画个火柴人_代码_06