<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="Canvas" width="300" height="300" style="background-color: gainsboro">
你打野 我挂机。不行就送~~
</canvas>
<script type="text/javascript">
window.onload=function(){
init();
}
function init() {
var Canvas = document.getElementById("Canvas");
var cxt = Canvas.getContext("2d");
//大头
cxt.fillStyle = "white";
cxt.beginPath();
cxt.arc(150, 80, 50, 0, Math.PI, true);
cxt.closePath();
cxt.fill();
//帽子
cxt.fillStyle = "red";
cxt.beginPath();
cxt.arc(150, 80, 50, -145*Math.PI/180, -35*Math.PI/180, false);
cxt.closePath();
cxt.fill();
//左眼
cxt.fillStyle = "black";
cxt.beginPath();
cxt.arc(130, 60, 5, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
//右眼
cxt.fillStyle = "black";
cxt.beginPath();
cxt.arc(170, 60, 5, 0, Math.PI*2, true);
cxt.closePath();
cxt.fill();
//body
cxt.fillStyle = "white";
cxt.beginPath();
cxt.fillRect(100,90,100,120);
cxt.closePath();
cxt.fill();
//左手
cxt.fillStyle = "white";
cxt.beginPath();
cxt.fillRect(70,100,20,80);
cxt.closePath();
cxt.fill();
//左手袖子
cxt.fillStyle = "red";
cxt.beginPath();
cxt.fillRect(70,100,20,30);
cxt.closePath();
cxt.fill();
//右手
cxt.fillStyle = "white";
cxt.beginPath();
cxt.fillRect(210,100,20,80);
cxt.closePath();
cxt.fill();
//右手袖子
cxt.fillStyle = "red";
cxt.beginPath();
cxt.fillRect(210,100,20,30);
cxt.closePath();
cxt.fill();
//左脚
cxt.fillStyle = "white";
cxt.beginPath();
cxt.fillRect(120,215,20,40);
cxt.closePath();
cxt.fill();
//右脚
cxt.fillStyle = "white";
cxt.beginPath();
cxt.fillRect(160,215,20,40);
cxt.closePath();
cxt.fill();
//衣服
cxt.fillStyle = "red";
cxt.beginPath();
cxt.fillRect(100,100,100,100);
cxt.closePath();
cxt.fill();
//三角裤
cxt.fillStyle="red";
cxt.beginPath();
cxt.moveTo(120,215);
cxt.lineTo(180,215);
cxt.lineTo(150,230);
cxt.lineTo(120,215);
cxt.closePath();
cxt.fill();
}
</script>
</body>
</html>
原文：http://www.cnblogs.com/yangfan19890919/p/4716039.html