前幾天自己做了個四分之一的圓,放到手機里面測試.效果不是很好.於是今天通過查資料,找到了canvas.自己研究了一天,發現可以使用canvas畫圓.代碼如下:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body> 9 <canvas id="canvas" width="150" height="150"></canvas> 10 <script type="text/javascript"> 11 var canvas = document.getElementById("canvas"); 12 function DrawSector(canvas_tag,start_angle,angle,radius,fill,anticlockwise){ 13 var centerPoint = {x:75,y:75}; 14 start_angle = start_angle || 0; 15 if (canvas_tag.getContext){ 16 //開始繪制路徑 17 ctx = canvas_tag.getContext("2d"); 18 ctx.beginPath(); 19 //畫出弧線 20 ctx.arc(centerPoint.x,centerPoint.y,radius,start_angle,angle,anticlockwise); 21 //畫出結束半徑 22 ctx.lineTo(centerPoint.x,centerPoint.y); 23 ctx.fillStyle="#FF0000"; 24 //如果需要填充就填充，不需要就算了 25 if (fill) { 26 ctx.fill(); 27 }else{ 28 ctx.closePath(); 29 ctx.stroke(); 30 } 31 } else { 32 alert('你需要使用火狐瀏覽器和蘋果瀏覽器最新版查看!'); 33 } 34 } 35 //畫一個起始角度為180度，結束角度為270度，繪圖方向順時針的填充扇形 36 DrawSector(canvas,Math.PI*1/2,Math.PI,50,true,false); 37 </script> 38 </body> 39 </html>
效果如圖:
說明如圖所示:
