概述 HTML5中的Canvas並沒有直接提供繪製橢圓的方法,以下是對幾種繪製方法的總結。各種方法各有優缺,視情況選用。各方法的參數相同:
context為Canvas的2D繪圖環境對象,
x為橢圓中心橫座標,
y為橢圓中心縱座標,
a為橢圓橫半軸長,
b為橢圓縱半軸長。
參數方程法 該方法利用橢圓的參數方程來繪製橢圓
//-----------用參數方程式繪製橢圓---------------- -----
//函數的參數x,y為橢圓中心;a,b分別為橢圓橫半軸、
//縱半軸長度,不可同時為0
//該方法的缺點是,當linWidth較寬,橢圓較扁時
//橢圓內部長軸端較為尖銳,不平滑,效率較低
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 {
//參數方程式為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();
};
均勻壓縮法均勻壓縮法複製程式碼
程式碼如下:
//------- -----均勻壓縮法繪製橢圓--------------------
//其方法是用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;
context.save();
context.translate(x, y);
context.beginPath();
//從橢圓縱縱軸下端開始逆時針方向繪製
context.moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo , 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)中點畫圓演算法」。這種方法由於比較“原始”,靈活性大,效率高,精度高,但要實現一個有使用價值的繪製橢圓的函數,比較複雜。例如,要當線寬改變時,演算法就複雜一些。雖然是畫圓的演算法,但畫橢圓的演算法與之類似,可以參考下。
Demo
下面是除光柵法之外,幾個繪製橢圓函數的演示,演示程式碼如下:
複製程式碼
程式碼如下:
注意,要成功運行程式碼,需要支援HTML5的Canvas的瀏覽器。 第一次寫博客,弄了一整天,真不容易啊!博客園的暗色皮膚模板對插入的代碼顯示效果不好。為了弄代碼格式,我可是煞費苦心啊!