概述

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

• context為Canvas的2D繪圖環境物件，
• x為橢圓中心橫座標，
• y為橢圓中心縱座標，
• a為橢圓橫半軸長，
• b為橢圓縱半軸長。

引數方程法

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

//-----------用引數方程繪製橢圓---------------------
//函式的引數x,y為橢圓中心；a,b分別為橢圓橫半軸、
//縱半軸長度，不可同時為0
//該方法的缺點是，當lineWidth較寬，橢圓較扁時
//橢圓內部長軸端較為尖銳，不平滑，效率較低
function
 
 ParamEllipse(context, x, y, a, b)
{
   //max是等於1除以長軸值a和b中的較大者
   //i每次迴圈增加1/max，表示度數的增加
   //這樣可以使得每次迴圈所繪製的路徑（弧線）接近1畫素
   var step = (a > b) ? 1 / a : 1 / b;
   context.beginPath();
   context.moveTo(x + a, y); //從橢圓的左端點開始繪製
   for (var i = 0; i < 2 * Math.PI; i += step)
   {
      //引數方程為x = a * cos(i), y = b * sin(i)，
 

      //引數為i，表示度數（弧度）
      context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
   }
   context.closePath();
   context.stroke();
};

均勻壓縮法

    這種方法利用了數學中的均勻壓縮原理將圓進行均勻壓縮為橢圓，理論上為能夠得到標準的橢圓.下面的程式碼會出現線寬不一致的問題，解決辦法看5樓的評論。

//------------均勻壓縮法繪製橢圓--------------------
//其方法是用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.restore();

   context.stroke();
};

三次貝塞爾曲線法一

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

//---------使用三次貝塞爾曲線模擬橢圓1---------------------
//此方法也會產生當lineWidth較寬，橢圓較扁時，
//長軸端較尖銳，不平滑的現象
function BezierEllipse1(context, x, y, a, b)
{
   //關鍵是bezierCurveTo中兩個控制點的設定
   //0.5和0.6是兩個關鍵係數（在本函式中為試驗而得）
   var ox = 0.5 * a,
       oy = 0.6 * b;

   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中一個帖子的回覆中改變而來，精度較高，也是通常用來繪製橢圓的方法.

//---------使用三次貝塞爾曲線模擬橢圓2---------------------
//此方法也會產生當lineWidth較寬，橢圓較扁時
//，長軸端較尖銳，不平滑的現象
//這種方法比前一個貝塞爾方法精確度高，但效率稍差
function BezierEllipse2(ctx, x, y, a, b)
{
   var k = .5522848,
   ox = a * k, // 水平控制點偏移量
   oy = b * k; // 垂直控制點偏移量

   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

下面是除光柵法之外，幾個繪製橢圓函式的演示，演示程式碼如下：

<div id="CanvasWrap" style=" background:#fff; width: 600px; height: 600px; border: 1pxsolidblack;"></div>

<script type="text/javascript">// <![CDATA[
   var canvas,
       context;
   var div = document.getElementById("CanvasWrap");
   div.innerHTML = "";
   canvas = document.createElement("canvas");
   canvas.style.width = "600px"
   canvas.style.height = "600px"
   canvas.width = 600;
   canvas.height = 600;
   context = canvas.getContext("2d");
   div.appendChild(canvas);

   function execDraw()
   {
      //解決Chrome下的線寬小於等於1的問題
      context.lineWidth = 1.1;
      context.strokeStyle="black"
      ParamEllipse(context, 130, 80, 50, 50);         //圓
      ParamEllipse(context, 130, 80, 100, 20);        //橢圓
      EvenCompEllipse(context, 130, 200, 50, 50);     //圓
      EvenCompEllipse(context, 130, 200, 100, 20);    //橢圓
      BezierEllipse1(context, 470, 80, 50, 50);       //圓
      BezierEllipse1(context, 470, 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, 450, 250, 50);
      context.strokeStyle = "blue";
      BezierEllipse2(context, 300, 450, 250, 50);
   };

   function clearCavnas()
   {
      context.clearRect(0, 0, 600, 600);
   };
// ]]></script>

<p>
   <br />
   <button onclick="execDraw();" type="button">執行</button>
   <button onclick="clearCanvas();" type="button">清理</button>
</p>

注意，要成功執行程式碼，需要支援HTML5的Canvas的瀏覽器。

    第一次寫部落格，弄了一整天，真不容易啊！部落格園的暗色面板模板對插入的程式碼顯示效果不好。為了弄程式碼格式，我可是煞費苦心啊！

轉自：http://www.cnblogs.com/shn11160/archive/2012/08/27/2658057.html