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