美文网首页
canvas实现椭圆最易理解版本

canvas实现椭圆最易理解版本

作者: 是素净呀丶 | 来源:发表于2017-04-01 15:09 被阅读0次

复习了一下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 坐标应进行对应的变化 )
  • 恢复画布

相关文章

网友评论

      本文标题:canvas实现椭圆最易理解版本

      本文链接:https://www.haomeiwen.com/subject/gfmiottx.html