canvas实现椭圆最易理解版本

复习了一下canvas的基础，来看看怎样用arc实现一个椭圆的绘制吧。

html

<style type="text/css">
    #canvas{ backgroud-color: #eee; }
</style>
<canvas id="canvas" width="400" height="400"></canvas>

js

function drawEllipse(ctx, x, y, rx, ry)
{
    var r = Math.min(rx, ry),
        scale_x = rx / r,
        scale_y = ry / r;

    ctx.save();
    ctx.scale(scale_x, scale_y);

    ctx.beginPath();
    ctx.arc(x / scale_x, y / scale_y, r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.stroke();

    ctx.restore();
}

(function()
{
    var canvas = document.querySelector('#canvas'),
        cxt    = canvas.getContext('2d');

    drawEllipse(cxt, 100, 100, 50, 80);
})()

原理 && summary

• 储存原始画布
• 取椭圆的较小r作为初始值画圆( 建议读者理解后用较大值重写一遍加深理解 )
• 计算rx ry 相对r的缩放值scale_x, scale_y
• 根据缩放值对画布进行调整
• 取r画圆( 因为画布进行了缩放 这里的x y 坐标应进行对应的变化 )
• 恢复画布