html5绘制火柴棒人物

清濛

于 2016-05-11 17:45:29 发布

阅读量1.2k

点赞数

分类专栏： Html5 文章标签： html5

本文链接：https://blog.csdn.net/xyy_933/article/details/51376668

版权

Html5 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍了如何利用HTML5的Canvas API绘制一个简单的火柴棒人物，通过实例代码展示了绘制过程，适合初学者了解HTML5绘图基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="500" height="300" style="border:1px solid blue;"></canvas>
</body>
<script>
function draw(id){
var c=document.getElementById('canvas');
var cxt=c.getContext("2d");
cxt.beginPath();//开始绘图路径
cxt.arc(100,50,30,0,Math.PI*2,true);//绘制一个圆形
cxt.fillStyle="black";
cxt.fill();
//绘制嘴巴
cxt.beginPath();
cxt.strokeStyle="#c00";
cxt.lineWidth=3;
cxt.arc(100,50,20,0,Math.PI,false);
cxt.stroke();
//绘制眼睛
cxt.beginPath();
cxt.fillStyle="#c00";
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);
cxt.fill();
//绘制身躯
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(60,190);
cxt.moveTo(100,150);
cxt.lineTo(140,190);
cxt.stroke();

}
</script>

</html>