在HTML5的CANVAS上绘制椭圆的几种方法

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();
};

查看更多关于在HTML5的CANVAS上绘制椭圆的几种方法的详细内容...