在html5的Canvas上繪製橢圓的幾種方法總結

概述

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

context為canvas的2d繪圖環境物件，

x為橢圓中心橫座標，

y為橢圓中心縱座標，

a為橢圓橫半軸長，

b為橢圓縱半軸長。

引數方程法

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

複製**

**如下:

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

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

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

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

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

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

context.closepath();

context.stroke();

}; 均勻壓縮法

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

複製**

**如下:

//------------均勻壓縮法繪製橢圓--www.cppcns.com------------------

//其方法是用arc方法繪製圓，結合scale進行

//橫軸或縱軸方向縮放（均勻壓縮）

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

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

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

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

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

; 三次貝塞爾曲線法一

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

複製**

**如下:

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

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

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

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

; 三次貝塞爾曲線法二

這種方法是從stackoverflow中乙個帖子的回覆中改變而來，精度較高，也是通常用來繪製橢圓的方法.

複製**

**如下:

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

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

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

//這種方法比前乙個貝塞爾方法精確度高，但效率稍差

function bezierellipse2(ctx, x, y, a, b)

; 光柵法

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

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

demo

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

複製**

**如下:

注意，要成功執行**，需要支援html5的canvas的瀏覽器。

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

本文標題: 在html5的canvas上繪製橢圓的幾種方法總結

本文位址:

在html5的Canvas上繪製橢圓的幾種方法總結

HTML5基礎 Canvas元素

HTML5中Canvas的drawText對齊細節

HTML5新增畫布元素canvas

在html5的Canvas上繪製橢圓的幾種方法總結

HTML5基礎 Canvas元素

HTML5中Canvas的drawText對齊細節

HTML5新增畫布元素canvas

相關推薦