利用<canvas width="200" height="200"></canvas>创建画布;
利用var cav=document.getElemeById('mr-cav').getContext('2d'）获得Canvas元素，然后使用Canvas元素的getContext()方法来获得图形上下文。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绘制人物</title>
</head>
<body>
<canvas id="mr-cav" width="900" height="900"></canvas>
<script type="text/javascript">
var cav=document.getElementById("mr-cav").getContext("2d");
cav.beginPath();
cav.fillStyle="red";
cav.arc(450,270,100,0,Math.PI*2,true);
cav.fill();
cav.beginPath();
cav.fillStyle="blue"
cav.arc(425,250,5,0,Math.PI*2,true);
cav.fill();
cav.beginPath();
cav.fillStyle="orange"
cav.arc(300,280,50,0,Math.PI*2,true);
cav.fill();
cav.beginPath();
cav.fillStyle="blue";
cav.arc(475,250,5,0,Math.PI*2,true);
cav.fill();
cav.beginPath();
cav.fillStyle="yellow";
cav.moveTo(450,50);
cav.lineTo(350,200);
cav.lineTo(550,200);
cav.fill();
cav.beginPath();
cav.fillStyle="blue";
cav.rect(450,25,25,65);
cav.fill();
cav.beginPath();
cav.fillStyle="white";
cav.rect(350,125,50,50);
cav.fill();
cav.beginPath();
cav.fillStyle="orange";
cav.rect(500,150,75,150);
cav.fill();
cav.beginPath();
cav.fillStyle="while";
cav.moveTo(450,280);
cav.lineTo(429,260);
cav.lineTo(471,260);
cav.fill();
cav.beginPath();
cav.fillStyle="yellow";
cav.moveTo(425,750);
cav.lineTo(200,300);
cav.lineTo(700,300);
cav.fill();
</script>
</body>
</html>
代码效果如下：
