Canvas画椭圆的方法

　　虽然标题是画椭圆，但是我们先来说说Canvas中的圆

　　相信大家对于Canvas画圆都不陌生

　　如上所示，直接调用API就可以了，但是计算机内部却是使用光栅学，利用bresenham算法画圆的，这个我们放到最后来说，先说说利用圆的参数方程画圆

　　原理是什么，相信三角函数不错的童鞋理解起来很容易的，如果不知道的话，注意注释①，我变化一下r的值，相信就立竿见影了~

　　r和2*Math.PI配合就是圆的精细程度，在半径为100的时候，r取1/10就可以了，通用的话可以写死，写成r = 1 / a;这样无论半径取大或者小，圆都会很精细，但是性能会有很大影响

　　现在来看看文章的主角，针对圆来看椭圆的

　　和圆基本一样，不过圆只有一个半径，而椭圆分为长轴和短轴了。

　　看下效果~

　　好了，画椭圆成功，文章结束~

　　怎么可能!

　　就这样结束也太没品了，刚刚是方法一，下面来看其他的

　　方法二，均匀压缩法

　　这是我最喜欢的方法，易理解，相比较方法一，性能也快了很多，先贴代码~

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

　　原理是利用了scale来对一个标准的圆进行压缩，ratioX是横轴缩放比率，ratioY是纵轴缩放比率，就因为这两个值不同，使得将标准圆缩放成了一个椭圆

　　记得save()和restore()还原context环境，so easy理解的方法

　　下面两种方法很高大上，都是利用三次贝塞尔曲线法

　　方法三，四，贝塞尔法

　　给个结果图~

　　光栅法的原理在这里就不说啦，那个说的话篇幅很大，在这里也不推荐用光栅法去画椭圆，针对不同线宽很麻烦

　　ok这篇文章就到这啦，Thanks~

以上就是Canvas画椭圆的方法的内容，更多相关内容请关注PHP中文网（www.php.cn）！