Canvas画椭圆的方法

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

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

 

oGC.arc400, 300, 100, 0, 2*Math.PI, false);

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

circleoGC, 400, 300, 100);
function circlecontext, x, y, a) { // x,y是坐标;a是半径
    var r = 1/a; // ①注意：此处r可以写死，不过不同情况下写死的值不同
    context.beginPath);
    context.moveTox + a, y);
    forvar i = 0; i < 2 * Math.PI; i += r) {
        context.lineTox + a * Math.cosi), y + a * Math.sini));
    }
    context.closePath);
    context.fill);
}

 

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

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

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

 

function EllipseOnecontext, x, y, a, b) {
    var step = a > b) ? 1 / a : 1 / b;
    context.beginPath);
    context.moveTox + a, y);
    forvar i = 0; i < 2 * Math.PI; i += step) {
        context.lineTox + a * Math.cosi), y + b * Math.sini));
    }
    context.closePath);
    context.fill);
}

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

看下效果~

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

怎么可能！！

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

方法二，均匀压缩法

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

function EllipseTwocontext, x, y, a, b) {
    context.save);
    var r = a > b) ? a : b;
    var ratioX = a / r;
    var ratioY = b / r;
    context.scaleratioX, ratioY);
    context.beginPath);
    context.arcx / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
    context.closePath);
    context.restore);
    context.fill);
}

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

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

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

方法三，四，贝塞尔法

function EllipseThreecontext, x, y, a, b) {
    var ox = 0.5 * a,
        oy = 0.6 * b;
 
    context.save);
    context.translatex, y);
    context.beginPath);
    context.moveTo0, b);
    context.bezierCurveToox, b, a, oy, a, 0);
    context.bezierCurveToa, -oy, ox, -b, 0, -b);
    context.bezierCurveTo-ox, -b, -a, -oy, -a, 0);
    context.bezierCurveTo-a, oy, -ox, b, 0, b);
    context.closePath);
    context.fill);
    context.restore);
}
 
function EllipseFourcontext, x, y, a, b) {
    var k = 0.5522848,
    ox = k * a,
    oy = k * b;
 
    context.translatex, y);
    context.beginPath);
    context.moveTo-a, 0);
    context.bezierCurveTo-a, oy, -ox, -b, 0, -b);
    context.bezierCurveToox, -b, a, -oy, a, 0);
    context.bezierCurveToa, oy, ox, b, 0, b);
    context.bezierCurveTo-ox, b, -a, oy, -a, 0);
    context.closePath);
    context.fill);
}

贝塞尔法的核心在于两个控制点的选取，但是它有致命的问题，当lineWidth较宽的时候，椭圆较扁，长轴较尖锐，会出现不平滑的情况

如果不知道什么事贝塞尔的话就自行百度……这个不解释了……

后面还有最后一种光栅法画椭圆，光栅法画圆很简单，画椭圆挺麻烦的，下面是最简单的一种椭圆画法，等于是lineWidth为1px的情况下

 

function EllipseFivecontext, x, y, a, b) {
    var data = context.getImageData0, 0, 800, 600);
    var imageData = data.data;
    var tx = 0;
    var ty = b;
    var d = b*b + a*a*-b + 0.25);
    var mx = a * a / Math.sqrta * a + b * b);
 
    whiletx <= mx) {
        ifd < 0) {
            d += b * b * 2 * tx + 3);
        } else {
            ty--;
            d += b * b * 2 * tx + 3) + 2 * a * a * 1 - ty);
            
        }
 
        tx++;
        setPixx + tx, y + ty);
        setPixx + tx, y - ty);
        setPixx - tx, y + ty);
        setPixx - tx, y - ty);
    }
 
    d = b * b * tx + 0.5) * tx + 0.5) + a * a * ty - 1) * ty - 1) - a * a * b * b;
    while ty > 0) {
        if d < 0) {
            tx++;
            d += b*b*2 * tx + 2) + a*a*-2 * ty + 3);
        }
        else {
            d += a*a*-2 * ty + 3);
        }
        ty--;
        setPixx + tx, y + ty);
        setPixx - tx, y + ty);
        setPixx + tx, y - ty);
        setPixx - tx, y - ty);
    }
 
    context.putImageDatadata, 0, 0);
 
    function setPixx, y){
        console.logx, y);
        var index = getStartIndexx, y);
        forvar i = 0; i< 4; i++) {
            ifi == 3) {
                imageData[index + i] = 255;
            }
            else{
                imageData[index + i] = 128;
            }
        }
    }
 
    function getStartIndexx, y) {
        return y * 800 * 4 + x * 4;
    }
}

给个结果图~

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

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

 

原创文章转载请注明：

转载自AlloyTeam：http://www.alloyteam.com/2015/07/canvas-hua-tuo-yuan-di-fang-fa/