HTML5中canvas元素，繪制圓形需要使用路徑，開始時要取得圖形上下文，首先使用路徑來勾勒圖形的輪廓，然后設置顏色，進行繪制。
arc(cx,cy,radius,start_angle,end_angle,direction);
cx 水平坐標
cy 垂直坐標
radius 圓心
start-angel 圓周起始位置 （以圓心為參考點，不是以坐標原點為參考點。下面配圖詳細解釋）
end_angle 圓周結束位置 Math.PI是半圓 Math.PI*2是整個圓 0.5為四分之一
direction 順、逆時針 false為順時針，true為逆時針（決定了圓弧的方向）
<!DOCTYPE html> <head> <meta charset="UTF-8" /> <script> function draw(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext('2d'); context.fillStyle = "#EEEEFF"; context.fillRect(0, 0, 400, 300); var n = 0; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true); context.closePath(); context.fillStyle = 'rgba(255, 0, 0, 0.25)'; context.fill(); } } </script> </head> <body onLoad="draw('canvas');"> <canvas id="canvas" width="400" height="300"/> </body> </html>
context.beginPath();
該方法不使用參數，通過調用該方法，開始路徑的繪制。在幾次循環的創建路徑的過程中，每次開始創建是都要調用beginPath函數。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
該方法使用六個參數，x為繪制圓形的起點橫坐標，y為繪制圓形圖形的起點坐標，radius為繪制圓形半徑，
starAngle為開始角度（以圓心為參考點，繞圓心旋轉，不是以坐標原點為參考點），endAngle為結束角度，anticlockwise為是否按順時針方向進行繪制。
arc方法不僅可以用來繪制圓形，也可以用來繪制圓弧。
context.closePath();
將路徑關閉后，路徑的創建工作就完成了，但還沒有真正繪制任何圖形。
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
使用創建好的路徑繪制圖形。
<!DOCTYPE html> <html><head><meta charset="gbk"> <title>HTML5 Canvas畫圓</title> </head> <body> <canvas id="canvas" width="400" height="400" style="border:2px solid blue;"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext('2d'); var types = ["Arc.OPEN","Arc.CHORD","Arc.PIE"]; function render(w, h,context) { context.lineWidth=5; for (var i = 0; i < types.length; i++) { context.lineWidth=5; context.strokeStyle="blue"; context.beginPath(); context.arc((i+1)*w/4,(i+1)*h/4, w/10,Math.PI/4,3*Math.PI/2,false) if(i==1) context.closePath(); if(i==2) { context.lineTo((i+1)*w/4,(i+1)*h/4) context.closePath(); } context.stroke(); context.fillStyle="gray"; context.fill(); } } render(400,400,context); </script></body></html>
轉：http://www.108js.com/article/article7/70206.html?id=1036