前端|画个火柴人

问题描述

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

问题分析

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

图1 火柴人示例图

需要用代码来实现火柴人的绘制，在这里可以用html5 canvas标签来绘制火柴人，但canvas标签本身没有绘制图形的能力，它只能作为图形的容器，简单的来说就是日常画画用的画布，还需要画画的画笔，即脚本来完成绘图，在这里选择canvas标签+JavaScript脚本来完成整体的绘制。

解决方案及效果

1）定义画布canvas。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</canvas>

</body>

</html>

图2 定义画布效果图

定义画布的示例代码中，用id表示画布的对象名称，用width、height直接设置画布的大小，为了方便展示画布，给画布添加了border: 1px，使得可以看见画布的边界。

2)绘制头部大圆形

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

END实习主编 | 王楠岚

责编 | 程才

where2go 团队

微信号：算法与编程之美

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。