復(fù)制代碼代碼如下: //-----------用參數(shù)方程繪制橢圓--------------------- //函數(shù)的參數(shù)x,y為橢圓中心；a,b分別為橢圓橫半軸、 //縱半軸長度，不可同時(shí)為0 //該方法的缺點(diǎn)是，當(dāng)lineWidth較寬，橢圓較扁時(shí) //橢圓內(nèi)部長軸端較為尖銳，不平滑，效率較低 function ParamEllipse(context, x, y, a, b) { //max是等于1除以長軸值a和b中的較大者 //i每次循環(huán)增加1/max，表示度數(shù)的增加 //這樣可以使得每次循環(huán)所繪制的路徑（弧線）接近1像素 var step = (a b) ? 1 / a : 1 / b; context.beginPath(); context.moveTo(x + a, y); //從橢圓的左端點(diǎn)開始繪制 for (var i = 0; i 2 * Math.PI; i += step) { //參數(shù)方程為x = a * cos(i), y = b * sin(i)， //參數(shù)為i，表示度數(shù)（弧度） context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.stroke(); }; 均勻壓縮法這種方法利用了數(shù)學(xué)中的均勻壓縮原理將圓進(jìn)行均勻壓縮為橢圓，理論上為能夠得到標(biāo)準(zhǔn)的橢圓.下面的代碼會(huì)出現(xiàn)線寬不一致的問題，解決辦法看5樓simonleung的評論。
復(fù)制代碼代碼如下: /p p //------------均勻壓縮法繪制橢圓-------------------- //其方法是用arc方法繪制圓，結(jié)合scale進(jìn)行 //橫軸或縱軸方向縮放（均勻壓縮） //這種方法繪制的橢圓的邊離長軸端越近越粗，長軸端點(diǎn)的線寬是正常值 //邊離短軸越近、橢圓越扁越細(xì)，甚至產(chǎn)生間斷，這是scale導(dǎo)致的結(jié)果 //這種缺點(diǎn)某些時(shí)候是優(yōu)點(diǎn)，比如在表現(xiàn)環(huán)的立體效果（行星光環(huán)）時(shí) //對于參數(shù)a或b為0的情況，這種方法不適用 function EvenCompEllipse(context, x, y, a, b) { context.save(); //選擇a、b中的較大者作為arc方法的半徑參數(shù) var r = (a b) ? a : b; var ratioX = a / r; //橫軸縮放比率 var ratioY = b / r; //縱軸縮放比率 context.scale(ratioX, ratioY); //進(jìn)行縮放（均勻壓縮） context.beginPath(); //從橢圓的左端點(diǎn)開始逆時(shí)針繪制 context.moveTo((x + a) / ratioX, y / ratioY); context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI); context.closePath(); context.stroke(); context.restore(); }; 三次貝塞爾曲線法一 三次貝塞爾曲線繪制橢圓在實(shí)際繪制時(shí)是一種近似，在理論上也是一種近似。 但因?yàn)槠湫瘦^高，在計(jì)算機(jī)矢量圖形學(xué)中，常用于繪制橢圓，但是具體的理論我不是很清楚。 近似程度在于兩個(gè)控制點(diǎn)位置的選取。這種方法的控制點(diǎn)位置是我自己試驗(yàn)得出，精度還可以.
復(fù)制代碼代碼如下: //---------使用三次貝塞爾曲線模擬橢圓1--------------------- //此方法也會(huì)產(chǎn)生當(dāng)lineWidth較寬，橢圓較扁時(shí)， //長軸端較尖銳，不平滑的現(xiàn)象 function BezierEllipse1(context, x, y, a, b) { //關(guān)鍵是bezierCurveTo中兩個(gè)控制點(diǎn)的設(shè)置 //0.5和0.6是兩個(gè)關(guān)鍵系數(shù)（在本函數(shù)中為試驗(yàn)而得） var ox = 0.5 * a, oy = 0.6 * b; /p p context.save(); context.translate(x, y); context.beginPath(); //從橢圓縱軸下端開始逆時(shí)針方向繪制 context.moveTo(0, b); context.bezierCurveTo(ox, b, a, oy, a, 0); context.bezierCurveTo(a, -oy, ox, -b, 0, -b); context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0); context.bezierCurveTo(-a, oy, -ox, b, 0, b); context.closePath(); context.stroke(); context.restore(); /p p 三次貝塞爾曲線法二這種方法是從StackOverFlow中一個(gè)帖子的回復(fù)中改變而來，精度較高，也是通常用來繪制橢圓的方法.
復(fù)制代碼代碼如下: //---------使用三次貝塞爾曲線模擬橢圓2--------------------- //此方法也會(huì)產(chǎn)生當(dāng)lineWidth較寬，橢圓較扁時(shí) //，長軸端較尖銳，不平滑的現(xiàn)象 //這種方法比前一個(gè)貝塞爾方法精確度高，但效率稍差 function BezierEllipse2(ctx, x, y, a, b) { var k = .5522848, ox = a * k, // 水平控制點(diǎn)偏移量 oy = b * k; // 垂直控制點(diǎn)偏移量 /p p ctx.beginPath(); //從橢圓的左端點(diǎn)開始順時(shí)針繪制四條三次貝塞爾曲線 ctx.moveTo(x - a, y); ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b); ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y); ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b); ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y); ctx.closePath(); ctx.stroke(); }; 光柵法這種方法可以根據(jù)Canvas能夠操作像素的特點(diǎn)，利用圖形學(xué)中的基本算法來繪制橢圓。 例如中點(diǎn)畫橢圓算法等。其中一個(gè)例子是園友 豆豆狗 的一篇博文 HTML5 Canvas 提高班（一） 光柵圖形學(xué)（1）中點(diǎn)畫圓算法 。這種方法由于比較 原始 ，靈活性大，效率高，精度高，但要想實(shí)現(xiàn)一個(gè)有使用價(jià)值的繪制橢圓的函數(shù)，比較復(fù)雜。比如，要當(dāng)線寬改變時(shí)，算法就復(fù)雜一些。雖然是畫圓的算法，但畫橢圓的算法與之類似，可以參考下。總結(jié)
基本上所有的方法都不可能達(dá)到100%精確，因?yàn)槭?a href='http://www.survivalescaperooms.com/tag/xianshiqi_7588_1.html' target='_blank'>顯示器分辨率的限制。其實(shí)最好的方法應(yīng)該是arc()+scale()。canvas繪圖庫KineticJS就是用的這種方法。在其他繪圖軟件中，不像HTML5的canvas那樣提供固有的arc()+scale()方法，通常用貝塞爾曲線模擬近似橢圓，無論是幾條貝塞爾曲線都是近似而已。關(guān)于用貝塞爾曲線模擬橢圓，可以參考這份資料：Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves。由于arc()+scale()是瀏覽器已經(jīng)實(shí)現(xiàn)的方法，理論上精度最高，所以從效率、精確度和簡單易用程度上來講，都是最佳的。在用arc()+scale()繪制完橢圓后，context.stroke()和 context.restore()兩個(gè)方法調(diào)用的先后順序不同，產(chǎn)生的結(jié)果會(huì)很有意思的。通常應(yīng)該先restore()再stroke()。 Demo下面是除光柵法之外，幾個(gè)繪制橢圓函數(shù)的演示，演示代碼如下：
