HTML canvas 笑脸

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
  <canvas id="mycanvas" width="600" height="600" style="border:1px solid blue;"></canvas>
  <script type="text/javascript">
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.beginPath();
  
  //大圆
  context.arc(250,250,100,0,Math.PI*2,true);
  context.fillStyle="yellow";
  context.fill();
  context.stroke();
  context.closePath();
  
  //左眼睛
  context.beginPath();
  context.arc(200,220,15,0,Math.PI,true);
  context.stroke();
  context.closePath();
  
  //右眼睛
  context.beginPath();
  context.arc(300,220,15,0,Math.PI,true);
  context.stroke();
  context.closePath();
  
  
  //嘴巴
  context.beginPath();
  context.arc(250,260,55,0,Math.PI,false);
  context.fillStyle="white";
  context.fill();
  context.closePath();
  context.stroke();
  
  //以下都是牙齿
  context.beginPath();
  context.moveTo(210,260);
  context.lineTo(210,296);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(230,260);
  context.lineTo(230,310);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(250,260);
  context.lineTo(250,315);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(270,260);
  context.lineTo(270,312);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(290,260);
  context.lineTo(290,298);
  context.stroke();
  context.closePath();
  </script>
</body>
</html>
效果图：