//-----------用參數(shù)方程繪制橢圓---------------------
//函數(shù)的參數(shù)x,y為橢圓中心；a,b分別為橢圓橫半軸、
//縱半軸長度，不可同時為0
//該方法的缺點是，當(dāng)lineWidth較寬，橢圓較扁時
//橢圓內(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();
};

</p> <p>//------------均勻壓縮法繪制橢圓--------------------
//其方法是用arc方法繪制圓，結(jié)合scale進行
//橫軸或縱軸方向縮放（均勻壓縮）
//這種方法繪制的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
//邊離短軸越近、橢圓越扁越細，甚至產(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); //進行縮放（均勻壓縮）
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---------------------
//此方法也會產(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;</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>};

//---------使用三次貝塞爾曲線模擬橢圓2---------------------
//此方法也會產(chǎn)生當(dāng)lineWidth較寬，橢圓較扁時
//，長軸端較尖銳，不平滑的現(xiàn)象
//這種方法比前一個貝塞爾方法精確度高，但效率稍差
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();
};

<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">執(zhí)行</button>
<button onclick="clearCanvas();" type="button">清理</button>
</p>