Demo
下面是除光栅法之外，几个绘制椭圆函数的演示，演示代码如下：
<div id=”CanvasWrap” style=” background:#fff; width: 600px; height: 600px; border: 1px solid black;”></div>
<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);
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);
};
function clearCavnas()
{
context.clearRect(0, 0, 600, 600);
};
// ]]></script>
<p>
<button onclick=”execDraw();” type=”button”>执行</button>
<button onclick=”clearCanvas();” type=”button”>清理</button>
</p>
注意，要成功运行代码，需要支持HTML5的Canvas的浏览器。
第一次写博客，弄了一整天，真不容易啊！博客园的暗色皮肤模板对插入的代码显示效果不好。为了弄代码格式，我可是煞费苦心啊！
