繪制曲線，經常會用到路徑的知識，如果你對路徑有疑問，可以參考我的這篇文章[js高手之路] html5 canvas系列教程 - 開始路徑beginPath與關閉路徑closePath詳解.
arc：畫弧度
cxt.arc( x, y, 半徑, 開始角度，結束角度，是否逆時針 );
x, y: 為弧度的中心橫坐標和縱坐標，如果這是畫一個圓.那么x,y就是圓的圓心.
開始角度與結束角度都是以弧度單位，弧度與角度的換算關系為： 弧度=角度*(π/180°）。
以時鍾為參考，3點鍾方向為0度，6點鍾方向為90度，9點鍾方向為180度，12點鍾方向為270度.
第五個參數：true為逆時針，false為順時針，默認值為false
在canvas的中心，換一個從0度方向開始，逆時針到270度方向的一段圓弧：
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ), 13 width = oCanvas.width, height = oCanvas.height; 14 15 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true ); 16 oGc.stroke(); 17 } 18 </script> 19 </head> 20 <body> 21 <canvas id="canvas" width="600" height="300"></canvas>
如果是順時針，就用這段：
oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false );
如果采用閉合路徑，弧度的起始點就會相連
1 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, true ); 2 oGc.closePath(); 3 oGc.stroke();
1 oGc.arc( width / 2, height / 2, height / 2, 0, 270 * Math.PI / 180, false ); 2 oGc.closePath(); 3 oGc.stroke();
畫兩個不同顏色的圓形：
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.beginPath(); 15 oGc.strokeStyle = '#09f'; 16 oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 ); 17 oGc.closePath(); 18 oGc.stroke(); 19 20 oGc.beginPath(); 21 oGc.strokeStyle = 'orange'; 22 oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 ); 23 oGc.closePath(); 24 oGc.stroke(); 25 } 26 </script> 27 </head> 28 <body> 29 <canvas id="canvas" width="600" height="300"></canvas> 30 </body>
畫兩個填充圓形，把上面的例子，stoke方式改成fill方式即可.
1 oGc.beginPath(); 2 oGc.fillStyle = '#09f'; 3 oGc.arc( 150, 150, 150, 0, 360 * Math.PI / 180 ); 4 oGc.closePath(); 5 oGc.fill(); 6 7 oGc.beginPath(); 8 oGc.fillStyle = 'orange'; 9 oGc.arc( 450, 150, 150, 0, 360 * Math.PI / 180 ); 10 oGc.closePath(); 11 oGc.fill();
畫一個圓角：
1 <style> 2 body { 3 background: #000; 4 } 5 #canvas{ 6 background:white; 7 } 8 </style> 9 <script> 10 window.onload = function(){ 11 var oCanvas = document.querySelector( "#canvas" ), 12 oGc = oCanvas.getContext( '2d' ); 13 14 oGc.moveTo( 150, 50 ); 15 oGc.lineTo( 250, 50 ); 16 oGc.stroke(); 17 18 oGc.beginPath(); 19 oGc.arc( 250, 100, 50, 270 * Math.PI / 180, 0, false ); 20 oGc.moveTo( 300, 100 ); 21 oGc.lineTo( 300, 200 ); 22 oGc.stroke(); 23 } 24 </script> 25 </head> 26 <body> 27 <canvas id="canvas" width="600" height="300"></canvas> 28 </body>
