圓形的用途很廣,當然也包含了橢圓。
<html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/javascript"> function $$(id){ return document.getElementById(id); } function pageLoad(){ var can = $$('can'); var cans = can.getContext('2d'); cans.beginPath(); cans.arc(200,150,100,0,Math.PI*2,true); cans.closePath(); cans.fillStyle = 'green';//本來這里最初使用的是red,截圖一看,傻眼了,怕上街被愛國者打啊,其實你懂的~~ cans.fill(); } </script> <body onload="pageLoad();"> <canvas id="can" width="400px" height="300px">4</canvas> </body> </html>
這里的arc方法的用法是 arc(X,Y,Radius,startAngle,endAngle,anticlockwise),意思是(圓心X坐標,圓心Y坐標,半徑,開始角度(弧度),結束角度弧度,是否按照順時針畫);
arc中各參數比較:
a、cans.arc(200,150,100,0,Math.PI,true);
c、cans.arc(200,150,100,0,Math.PI/2,true);
c、cans.arc(200,150,100,0,Math.PI/2,true);
d、cans.arc(200,150,100,0,Math.PI/2,false);