HTML5 Canvas中繪制橢圓的方法有哪些

本篇內容介紹了“HTML5 Canvas中繪制橢圓的方法有哪些”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

概述

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

1.context為Canvas的2D繪圖環境對象，

2.x為橢圓中心橫坐標，

3.y為橢圓中心縱坐標，

4.a為橢圓橫半軸長，

5.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樓simonleung的評論。

復制代碼

代碼如下:

</p><p>//------------均勻壓縮法繪制橢圓--------------------

//其方法是用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();

};

三次貝塞爾曲線法一

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

復制代碼

代碼如下:

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

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

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

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

{

//關鍵是bezierCurveTo中兩個控制點的設置

//0.5和0.6是兩個關鍵系數（在本函數中為試驗而得）

var ox = 0.5 * a,

oy = 0.6 * b;</p><p> 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();</p><p>};

三次貝塞爾曲線法二

這種方法是從StackOverFlow中一個帖子的回復中改變而來，精度較高，也是通常用來繪制橢圓的方法.

復制代碼

代碼如下:

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

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

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

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

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

{

var k = .5522848,

ox = a * k, // 水平控制點偏移量

oy = b * k; // 垂直控制點偏移量</p><p> 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 提高班（一） &mdash;&mdash; 光柵圖形學（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: 1px solid black;"></div></p><p><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);</p><p> 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);

};</p><p> function clearCavnas()

{

context.clearRect(0, 0, 600, 600);

};

// ]]></script></p><p><p>

<button onclick="execDraw();" type="button">執行</button>

<button onclick="clearCanvas();" type="button">清理</button>

</p>

注意，要成功運行代碼，需要支持HTML5的Canvas的瀏覽器。

“HTML5 Canvas中繪制橢圓的方法有哪些”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！