虽然标题是画椭圆，但是我们先来说说Canvas中的圆
相信大家对于Canvas画圆都不陌生
|
1 |
oGC.arc(400, 300, 100, 0, 2*Math.PI, false); |
如上所示，直接调用API就可以了，但是计算机内部却是使用光栅学，利用bresenham算法画圆的，这个我们放到最后来说，先说说利用圆的参数方程画圆
|
1 2 3 4 5 6 7 8 9 10 11 |
circle(oGC, 400, 300, 100); function circle(context, x, y, a) { // x,y是坐标;a是半径 var r = 1/a; // ①注意：此处r可以写死，不过不同情况下写死的值不同 context.beginPath(); context.moveTo(x + a, y); for(var i = 0; i < 2 * Math.PI; i += r) { context.lineTo(x + a * Math.cos(i), y + a * Math.sin(i)); } context.closePath(); context.fill(); } |
原理是什么，相信三角函数不错的童鞋理解起来很容易的，如果不知道的话，注意注释①，我变化一下r的值，相信就立竿见影了~
r和2*Math.PI配合就是圆的精细程度，在半径为100的时候，r取1/10就可以了，通用的话可以写死，写成r = 1 / a；这样无论半径取大或者小，圆都会很精细，但是性能会有很大影响
现在来看看文章的主角，针对圆来看椭圆的
|
1 2 3 4 5 6 7 8 9 10 |
function EllipseOne(context, x, y, a, b) { 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) { context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i)); } context.closePath(); context.fill(); } |
和圆基本一样，不过圆只有一个半径，而椭圆分为长轴和短轴了。
看下效果~
好了，画椭圆成功，文章结束~
怎么可能！！
就这样结束也太没品了，刚刚是方法一，下面来看其他的
方法二，均匀压缩法
这是我最喜欢的方法，易理解，相比较方法一，性能也快了很多，先贴代码~
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function EllipseTwo(context, x, y, a, b) { context.save(); var r = (a > b) ? a : b; var ratioX = a / r; var ratioY = b / r; context.scale(ratioX, ratioY); context.beginPath(); context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false); context.closePath(); context.restore(); context.fill();
如上所示，直接调用API就可以了，但是计算机内部却是使用光栅学，利用bresenham算法画圆的，这个我们放到最后来说，先说说利用圆的参数方程画圆
原理是什么，相信三角函数不错的童鞋理解起来很容易的，如果不知道的话，注意注释①，我变化一下r的值，相信就立竿见影了~
r和2*Math.PI配合就是圆的精细程度，在半径为100的时候，r取1/10就可以了，通用的话可以写死，写成r = 1 / a；这样无论半径取大或者小，圆都会很精细，但是性能会有很大影响 现在来看看文章的主角，针对圆来看椭圆的
和圆基本一样，不过圆只有一个半径，而椭圆分为长轴和短轴了。 看下效果~
好了，画椭圆成功，文章结束~
怎么可能！！ 就这样结束也太没品了，刚刚是方法一，下面来看其他的 方法二，均匀压缩法 这是我最喜欢的方法，易理解，相比较方法一，性能也快了很多，先贴代码~
|
