- context為Canvas的2D繪圖環(huán)境對象，
- x為橢圓中心橫坐標(biāo)，
- y為橢圓中心縱坐標(biāo)，
- a為橢圓橫半軸長，
- b為橢圓縱半軸長。
參數(shù)方程法
該方法利用橢圓的參數(shù)方程來繪制橢圓
- //-----------用參數(shù)方程繪制橢圓---------------------
- //函數(shù)的參數(shù)x,y為橢圓中心；a,b分別為橢圓橫半軸、
- //縱半軸長度，不可同時為0
- //該方法的缺點是，當(dāng)linWidth較寬，橢圓較扁時
- //橢圓內(nèi)部長軸端較為尖銳，不平滑，效率較低
- function ParamEllipse(context, x, y, a, b)
- {
- //max是等于1除以長軸值a和b中的較大者
- //i每次循環(huán)增加1/max，表示度數(shù)的增加
- //這樣可以使得每次循環(huán)所繪制的路徑（弧線）接近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)
- {
- //參數(shù)方程為x = a * cos(i), y = b * sin(i)，
- //參數(shù)為i，表示度數(shù)（弧度）
- context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
- }
- context.closePath();
- context.stroke();
- };
均勻壓縮法
這種方法利用了數(shù)學(xué)中的均勻壓縮原理將圓進(jìn)行均勻壓縮為橢圓，理論上為能夠得到標(biāo)準(zhǔn)的橢圓.
- //------------均勻壓縮法繪制橢圓--------------------
- //其方法是用arc方法繪制圓，結(jié)合scale進(jìn)行
- //橫軸或縱軸方向縮放（均勻壓縮）
- //這種方法繪制的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
- //邊離短軸越近、橢圓越扁越細(xì)，甚至產(chǎn)生間斷，這是scale導(dǎo)致的結(jié)果
- //這種缺點某些時候是優(yōu)點，比如在表現(xiàn)環(huán)的立體效果（行星光環(huán)）時
- //對于參數(shù)a或b為0的情況，這種方法不適用
- function EvenCompEllipse(context, x, y, a, b)
- {
- context.save();
- //選擇a、b中的較大者作為arc方法的半徑參數(shù)
- var r = (a > b) ? a : b;
- var ratioX = a / r; //橫軸縮放比率
- var ratioY = b / r; //縱軸縮放比率
- context.scale(ratioX, ratioY); //進(jìn)行縮放（均勻壓縮）
- 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();
- };
下面的代碼會出現(xiàn)線寬不一致的問題，解決辦法：
均勻壓縮法中把
context.stroke(); context.restore();
改為
context.restore(); context.stroke();
就可以
三次貝塞爾曲線法一
三次貝塞爾曲線繪制橢圓在實際繪制時是一種近似，在理論上也是一種近似。 但因為其效率較高，在計算機(jī)矢量圖形學(xué)中，常用于繪制橢圓，但是具體的理論我不是很清楚。 近似程度在于兩個控制點位置的選取。這種方法的控制點位置是我自己試驗得出，精度還可以.
- //---------使用三次貝塞爾曲線模擬橢圓1---------------------
- //此方法也會產(chǎn)生當(dāng)lineWidth較寬，橢圓較扁時，
- //長軸端較尖銳，不平滑的現(xiàn)象
- function BezierEllipse1(context, x, y, a, b)
- {
- //關(guān)鍵是bezierCurveTo中兩個控制點的設(shè)置
- //0.5和0.6是兩個關(guān)鍵系數(shù)（在本函數(shù)中為試驗而得）
- 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中一個帖子的回復(fù)中改變而來，精度較高，也是通常用來繪制橢圓的方法.
- //---------使用三次貝塞爾曲線模擬橢圓2---------------------
- //此方法也會產(chǎn)生當(dāng)lineWidth較寬，橢圓較扁時
- //，長軸端較尖銳，不平滑的現(xiàn)象
- //這種方法比前一個貝塞爾方法精確度高，但效率稍差
- 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();
- };
光柵法
這種方法可以根據(jù)Canvas能夠操作像素的特點，利用圖形學(xué)中的基本算法來繪制橢圓。 例如中點畫橢圓算法等。
其中一個例子是園友“豆豆狗”的一篇博文“HTML5 Canvas 提高班(一) —— 光柵圖形學(xué)(1)中點畫圓算法”。這種方法由于比較“原始”，靈活性大，效率高，精度高，但要想實現(xiàn)一個有使用價值的繪制橢圓的函數(shù)，比較復(fù)雜。比如，要當(dāng)線寬改變時，算法就復(fù)雜一些。
原文出自：Cloudy Waterman
【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。