使用canvas绘制椭圆

使用 Canvas 绘制椭圆需要先了解椭圆的数学公式。设椭圆的中心坐标为 (x0, y0)，长轴和短轴分别为 a、b，则椭圆上任意一点的坐标 (x, y) 满足以下公式：

((x - x0) / a)² + ((y - y0) / b)² = 1

根据这个公式，我们可以通过绘制一条条的线段来模拟绘制椭圆。具体实现代码如下：

function drawEllipse(ctx, x, y, a, b) {
  var step = (a > b) ? 1 / a : 1 / b;
  ctx.beginPath();
  ctx.moveTo(x + a, y);
  for (var i = 0; i < 2 * Math.PI; i += step) {
    ctx.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
  }
  ctx.closePath();
  ctx.stroke();
}

这个函数接受五个参数：

- ctx: Canvas 上下文对象
- x, y: 椭圆的中心坐标
- a, b: 椭圆的长轴和短轴

通过计算每个点的坐标，然后使用 `lineTo` 方法连接这些点，就可以绘制出椭圆了。

示例代码：

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

drawEllipse(ctx, 100, 75, 50, 25);

这个例子会在 id 为 myCanvas 的 canvas 元素上绘制一个中心坐标为 (100, 75)，长轴为 50，短轴为 25 的椭圆。