绘制椭圆
我们今天主要学习绘制椭圆的原生的 ellipse()， 因为这个目前还在实验当中，在各大浏览器中的兼容性不是太好，我们在开发过程中需要注意。
下图是 ellipse() 的兼容性说明：
我们知道椭圆有中心点，即椭圆的两个焦点连线的中心，还有长轴和短轴，我们在 ellipse() 时，就需要用到这几个概念。
先看整体案例：
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=
canvas.height=
const ctx = canvas.getContext('2d');
ctx.Style="#456795";
ctx.lineWidth=;
ctx.ellipse(, , , , * Math.PI/, , *Math.PI); //了直接绘制椭圆的
ctx.();
</script>
</body>
</html>
运行结果：
这样我们就绘制了椭圆。
ellipse 有7个必填参数和可选参数，我们详细地说明一下这几个参数的用途。
语法：
void ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);
第1、2个参数表示的是椭圆中心点的坐标，第3、4个参数表示的是长半轴和短半轴的长度，第5个参数表示的是椭圆的旋转角度，这里需要注意它的值也是以弧度表示的，和第6、7个参数的值类型是一样的，第6、7个参数表示的是椭圆的起始角和结束角。
第8个参数是可选参数，表示的是顺时针绘制还是逆时针绘制。绘制椭圆的后三个参数和我们绘制圆的最后三个参数的含义是一样的。
<!DOCTYPE html>
<html>
<head>
< charset="utf-8">
<title>网Wiki</title>
<style>
#imooc{
border:px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器 HTML5 canvas </canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=
canvas.height=
const ctx = canvas.getContext('2d');
ctx.Style="#456795";
ctx.lineWidth=;
ctx.ellipse(, , , , , *Math.PI, *Math.PI)
ctx.closePath()
ctx.();
</script>
</body>
</html>
执行结果：
我们可以看到左半个椭圆已经绘制好了，这里执行了 closePath() 就可以得到一条闭合的路径了。
本小节中我们使用到新的 ellipse()。
ellipse 作用是绘制中点在 (x, y) 的椭圆。
变量说明：
本小节我们主要学习了利用 ellipse 绘制椭圆。由于兼容性的问题，我们在后面的小节中还会学到兼容性更好的绘制椭圆的。
602392714
清零编程群