canvas繪制圓形的思路：
1、創建路徑 XXX.beginpath();
2、創建圓形的路徑；
3、關閉路徑；XXX.closepath(); 路徑不關閉也能繪制出圖形
4、設定繪制樣式。
創建圓形路徑時需要用到對象的arc方法，方法定義如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x為圓形起點的橫坐標，y為圓形起點的縱坐標，radius為圓形半徑，startAngle為開始角度，endAngle為結束角度，anticlockwise是否按順時針方向進行繪制。
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <head> 4 </head> 5 6 <body> 7 <canvas id="yuanxing" width="1000" height="1000"></canvas> 8 <script type=text/javascript> 9 var canvas=document.getElementById("yuanxing"); 10 var context=canvas.getContext("2d"); 11 context.fillStyle="#FF0000"; 12 context.beginPath(); 13 context.arc(700,400,200,0,Math.PI*2,true); //Math.PI*2是JS計算方法，是圓 14 context.closePath(); 15 context.fill(); 16 </script> 17 </body> 18 </html>