由於HTML Canvas 2D Context標準中並沒有直接繪製橢圓與橢圓弧的方法，所以瀏覽器普遍沒有這個方法，不過，Chrome支援ellipse方法，至於從哪個版本開始支援的，我就未查證了。IE11，Edge, Firefox, Safari目前最新版都還不支援。。。


所以，我們需要用JS來實現這個方法。原理就是用已經支援的其它方法來模擬ellipse方法，可以用lineTo, quadraticCurveTo, bezierCurveTo, arcTo, arc等方法來實現。


用lineTo來模擬的話，就是引數方程的形式，計算出橢圓上的點的座標，逐點用lineTo繪製模擬橢圓。簡單粗暴有效。


用quadraticCurveTo, bezierCurveTo是一種近似模擬，用貝塞爾曲線來擬合橢圓或橢圓弧，關鍵在於計算合適的控制點。有些特定場景下很適合。


用arcTo, arc來實現也比較簡單，不需要複雜計算，由於arcTo, arc只提供了繪製正圓弧的功能，要繪製橢圓弧，配合scale變形就可以了。推薦使用該方法。實現程式碼如下：

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
  CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antiClockwise) {
    this.save();
    this.translate(x, y);
    this.rotate(rotation);
    this.scale(radiusX, radiusY);
    this.arc(0, 0, 1, startAngle, endAngle, antiClockwise);
    this.restore();
  }
}
 

使用示例：

//
var canvas = document.getElementById("canvas1"),
    ctx = canvas.getContext('2d');
//....
ctx.moveTo(100,200);
ctx.ellipse(300, 200, 100, 60, 0, 0, Math.PI, true);
ctx.stroke();

ellipse方法各引數的含義：

x, 橢圓圓心X座標

y, 橢圓圓心Y座標

radiusX, 長半軸長度

radiusY, 長半軸長度

rotation, 橢圓旋轉角度 (單位是度不是弧度)

startAngle, 橢圓弧起始角弧度 (單位是弧度不是度！)

endAngle, 橢圓弧結束角弧度 (單位是弧度不是度！)

antiClockwise, 是否是逆時針方向繪製。true表示逆時針方向繪製橢圓弧，false順時針方向繪製橢圓弧。

至於為什麼一個方法內驚現 2 種角度單位，我只能說：前端標準就是這麼亂！

Google出品的 canvas-5-polyfill.js 用於增強canvas相容性，它也給canvas加上了ellipse方法