概述
HTML5中的Canvas並沒有直接提供繪製橢圓的方法，以下是對幾種繪製方法的總結。各種方法各有優缺，視情況選用。各方法的參數相同：
1.context為Canvas的2D繪圖環境對象，
2.x為橢圓中心橫座標，
3.y為橢圓中心縱座標，
4.a為橢圓橫半軸長，
5.b為橢圓縱半軸長。
參數方程式法
該方法利用橢圓的參數方程來繪製橢圓
均勻壓縮法
這種方法利用了數學中的均勻壓縮原理將圓進行均勻壓縮為橢圓，理論上為能夠得到標準的橢圓.下面的代碼會出現線寬不一致的問題，解決辦法看5樓simonleung的評論。
//------------均勻壓縮法繪製橢圓--------------------
//其方法是用arc方法繪製圓，結合scale進行
//橫軸或縱軸方向縮放（均勻壓縮）
//這種方法繪製的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
//邊離短軸越近、橢圓越扁越細，甚至產生間斷，這是scale導致的結果
//這種缺點某些時候是優點，例如在表現環的立體效果（行星光環）時
//對於參數a或b為0的情況，這種方法不適用
function EvenCompEllipse(context, x, y, a, b)
{
context.save();
//選擇a、b中的較大者作為arc方法的半徑參數
var r = (a > b) ? a : b;
var ratioX = a / r; //橫軸縮放比
var ratioY = b / r; //縱軸縮放比
context.scale(ratioX, ratioY); //進行縮放（均勻壓縮）
context.beginPath();
//從橢圓的左端點開始逆時針繪製
context.moveTo((x a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.restore();
};
三次貝塞爾曲線法一
三次貝塞爾曲線繪製橢圓在實際繪製時是近似，理論上也是近似。 但因為其效率較高，在電腦向量圖形學中，常用於繪製橢圓，但是具體的理論我不是很清楚。 近似程度在於兩個控制點位置的選取。這個方法的控制點位置是我自己試驗得出，精確度還可以.
context.save();
context.translate(x, y);
context.beginPath();
//從橢圓縱軸下端開始逆時針方向繪製
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();
};
三次貝塞爾曲線法二
這種方法是從StackOverFlow中一個貼文的回覆中改變而來，精確度較高，也是通常用來繪製橢圓的方法.
ctx.beginPath();
//從橢圓的左端點開始順時針繪製四條三次貝塞爾曲線
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();
};
光柵法
這種方法可以根據Canvas能夠操作像素的特點，利用圖形學中的基本演算法來繪製橢圓。 例如中點畫橢圓演算法等。
其中一個例子是園友「豆豆狗」的部落格文章「HTML5 Canvas 提高班（一） —— 光柵圖形學（1）中點畫圓演算法」。這種方法由於比較“原始”，靈活性大，效率高，精度高，但要實現一個有使用價值的繪製橢圓的函數，比較複雜。例如，要當線寬改變時，演算法就複雜一些。雖然是畫圓的演算法，但畫橢圓的演算法與之類似，可以參考下。
總結
基本上所有的方法都不可能達到100%精確，因為受顯示器解析度的限制。
其實最好的方法應該是arc() scale()。 canvas繪圖庫KineticJS就是用的這種方法。
在其他繪圖軟體中，不像HTML5的canvas那樣提供固有的arc() scale()方法，通常用貝塞爾曲線模擬近似橢圓，無論是幾條貝塞爾曲線都是近似而已。關於用貝塞爾曲線模擬橢圓，可以參考這份資料：Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves。
由於arc() scale()是瀏覽器已經實現的方法，理論上精度最高，所以從效率、精確度和簡單易用程度來講，都是最佳的。
在用arc() scale()繪製完橢圓後，context.stroke()和 context.restore()兩個方法呼叫的先後順序不同，產生的結果會很有意思的。通常應該先restore()再stroke()。
Demo
下面是除光柵法之外，幾個繪製橢圓函數的演示，演示程式碼如下：
function execDraw()
{
//解決Chrome下的線寬小於等於1的問題
context.lineWidth = 1.1;
context.StrokeStyle="black"
ParamEl (context, 130、80、50、50）； // 圓
ParamEllipse(context, 130, 80, 100, 20); // 橢圓
EvenCompEllipse(context, 130, 200, 50, 500); // 圓
EvenCompEllipse(context, 130, 200, 100, 20); // 橢圓
BezierEllipse1(context, 470, 80, 50, 50); // 圓
Bezier,Ellipse 17(Ellipse,Ellipse) 80, 100, 20); // 橢圓
BezierEllipse2(context, 470, 200, 50, 50); // 圓
BezierEllipse2(context, 470, 200, 100, 20); > //偵測相似性(重疊的程度)
ParamEllipse(context, 300, 450, 250, 50);
context.strokeStyle = "yellow";
BezierEllipse1(context, 300, 50, 25050, 25050, 300, 50, 25050, 25050, 300, 50, 25050, , 50);
context.tripStyle = "blue";
BezierEllipse2(context, 300, 450, 250, 50);
};
functionclearCavnas()
{
context.clearRect(0, 0, 600, 600);
};
// ]]>
