canvas绘制火柴人

来源：互联网发布：世界之窗浏览器知乎编辑：程序博客网时间：2024/04/28 01:43

<!doctype html>
<html>
<head>

<style>
#huaban{
border:1px solid;
}
</style>
<script>
</script>
<meta charset="UTF-8">
</head>
<body>
<canvas width="200" height="200" id="huaban">
</canvas>
<script>
var can=document.getElementById("huaban");//获得画板数据
var con=can.getContext('2d');//获得笔刷
con.lineWidth=2;//设置县调平宽度为2个像素
con.beginPath();//起始一个新路径
con.arc(100,50,27,0,Math.PI*2,true);//一个圆形路径
con.stroke();//画出一个线条圆当做脸
con.beginPath();//起始一个新路径
con.arc(100,50,20,0,Math.PI,false);//一个半圆弧路径
con.stroke();//绘制半圆当做嘴
con.beginPath();//起始新的路径
con.arc(91,46,4,0,Math.PI*2,true);
con.fill();//填充两个小圆当做眼睛
con.beginPath();
con.arc(109,46,4,0,Math.PI*2,true);
con.fill();
con.beginPath();//开始新路径
con.moveTo(100,77);//移动到下巴
con.lineTo(100,160);//画一个直线当身子
con.moveTo(100,90);//画两个斜线当手
con.lineTo(75,120);
con.moveTo(100,90);
con.lineTo(125,120);
con.moveTo(100,160);//画俩个斜线当腿
con.lineTo(70,200);
con.moveTo(100,160);
con.lineTo(130,200);
con.stroke();//画出身体
</script>
</body>
</html>

阅读全文

0 0