您的位置：首页 > Web前端 > HTML5

html5绘制火柴棒人物

2016-05-11 17:45 459 查看

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body onload="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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航