html5 中的 canvas 繪製橢圓的方法

引用：

html5中的canvas並沒有直接提供繪製橢圓的方法，下面是對幾種繪製方法的總結。各種方法各有優缺，視情況選用。各方法的引數相同：

該方法利用橢圓的引數方程來繪製橢圓

//-----------用引數方程繪製橢圓---------------------

//函式的引數x,y為橢圓中心；a,b分別為橢圓橫半軸、

//縱半軸長度，不可同時為0

//該方法的缺點是，當linwidth較寬，橢圓較扁時

//橢圓內部長軸端較為尖銳，不平滑，效率較低

function paramellipse(context, x, y, a, b)

context.closepath();

context.stroke();};

這種方法利用了數學中的均勻壓縮原理將圓進行均勻壓縮為橢圓，理論上為能夠得到標準的橢圓.

//------------均勻壓縮法繪製橢圓--------------------

//其方法是用arc方法繪製圓，結合scale進行橫軸或縱軸方向縮放（均勻壓縮）

//這種方法繪製的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值

//邊離短軸越近、橢圓越扁越細，甚至產生間斷，這是scale導致的結果

//這種缺點某些時候是優點，比如在表現環的立體效果（行星光環）時

//對於引數a或b為0的情況，這種方法不適用

function evencompellipse(context, x, y, a, b);

三次貝塞爾曲線繪製橢圓在實際繪製時是一種近似，在理論上也是一種近似。但因為其效率較高，在計算機向量圖形學中，常用於繪製橢圓，但是具體的理論我不是很清楚。近似程度在於兩個控制點位置的選取。這種方法的控制點位置是我自己試驗得出，精度還可以.

//---------使用三次貝塞爾曲線模擬橢圓1-----------------

//此方法也會產生當linewidth較寬，橢圓較扁時，

//長軸端較尖銳，不平滑的現象

function bezierellipse1(context, x, y, a, b);

這種方法可以根據canvas能夠操作畫素的特點，利用圖形學中的基本演算法來繪製橢圓。例如中點畫橢圓演算法等。

其中乙個例子是園友「豆豆狗」的一篇博文「html5 canvas 提高班（一） —— 光柵圖形學（1）中點畫圓演算法」。這種方法由於比較「原始」，靈活性大，效率高，精度高，但要想實現乙個有使用價值的繪製橢圓的函式，比較複雜。比如，要當線寬改變時，演算法就複雜一些。