1、圆形，吃豆人

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas>
  11. <script>
  12. //   圆：圆心（x，y），半径（r），弧度（起始弧度，结束弧度），方向（顺时针，逆时针）
  13. var canvas = document.getElementById('can');
  14. var ctx = canvas.getContext("2d");
  15. // ctx.arc(100,100,50,0,Math.PI * 2,0);//参数：圆心（x，y），半径（r），弧度（起始弧度，结束弧度），方向（顺时针，逆时针）
  16. // ctx.stroke();
  17. // 吃豆人
  18. ctx.arc(100,100,50,0,Math.PI * 1.9,0);
  19. ctx.lineTo(100,100);
  20. ctx.closePath();
  21. ctx.stroke();
  22. </script>
  23. </body>