Canvas中如何绘制弧形和圆形
在Canvas中绘制弧形和圆形的计算方法：
arc(x,y,radius,startAngle, endAngle,bAntiClockwise)
x,y：是arc的中心点
radius：是半径长度
startAngle：是以starAngle开始（弧度）
endAngle：是以endAngle结束（弧度）
bAntiClockwise：是否是逆时针，设置为true意味着弧形的绘制是逆时针方向的，设置为false意味着顺时针进行
特殊角度数和弧度数对应表
| 度 | 0° | 30° | 45° | 60° | 90° | 120° | 135° | 150° | 180° | 270° | 360° |
| 弧度 | 0 | π/6 | π/4 | π/3 | π/2 | 2π/3 | 3π/4 | 5π/6 | π | 3π/2 | 2π |
1<!DOCTYPE HTML>
2<html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>绘制一个小脸</title>
6 <meta http-equiv="Pragma" content="no-cache" />
7 <meta http-equiv="Cache-Control" content="no-cache" />
8 <meta http-equiv="Expires" content="0" />
9 <meta http-equiv="ImageToolbar" content="no" />
10 <script type="text/javascript">
11 function drawRadian(){
12 var context = document.getElementById('canvas').getContext('2d');
13 context.beginPath();
14 context.strokeStyle = "rgb(0,0,0)";
15 context.arc(100,100,100,0,2*Math.PI,true);
16 context.closePath();
17 context.fillStyle = 'rgb(200,0,200)';
18 context.fill();
19
20 context.beginPath();
21 context.arc(50,75,25,0,2*Math.PI,true);
22 context.fillStyle = 'rgb(0,0,0)';
23 context.fill();
24
25 context.beginPath();
26 context.arc(150,75,25,0,2*Math.PI,true);
27 context.fillStyle = 'rgb(0,0,0)';
28 context.fill();
29
30 context.beginPath();
31 context.arc(150,75,25,0,2*Math.PI,true);
32 context.fillStyle = 'rgb(0,0,0)';
33 context.fill();
34
35 context.beginPath();
36 context.arc(100,125,10,0,2*Math.PI,true);
37 context.fillStyle = 'rgb(0,0,0)';
38 context.fill();
39
40 context.beginPath();
41 context.strokeStyle = "rgb(0,0,0)";
42 context.lineWidth = 5;
43 context.arc(100,150,25,Math.PI/6,5*Math.PI/6,false);
44
45 context.stroke();
46
47 }
48 </script>
49 </head>
50 <body onload="drawRadian()">
51 <canvas id="canvas" width='400' height="300">
52 your browser doesn't support the HTMl5 elemnt canvas.
53 </canvas>
54 </body>
55</html>
最终效果：
参考：http://bbs.html5china.com/thread-229-1-1.html
http://www.ibm.com/developerworks/cn/web/1012_linlin_html5canvas/index.html?ca=drs-
