更新：

• 缩放方法会影响笔画宽度的外观
• 正确的缩放方法可以保持笔画宽度不变
• 画布具有 Chrome 现在支持的椭圆方法
• 向 JSBin 添加了更新的测试

JSBin 测试示例（更新以测试其他人的答案以进行比较）

• Bezier - 基于包含矩形和宽度/高度的左上角绘制
• Bezier with Center - 基于中心和宽度/高度绘制
• Arcs and Scaling - 基于绘制圆和缩放比例绘制
  • 见Deven Kalra 的回答
• 二次曲线 - 用二次曲线绘制
  • 测试似乎不太一样，可能是实现
  • 见oyophant的回答
• Canvas Ellipse - 使用 W3C 标准 ellipse() 方法
  • 测试似乎不太一样，可能是实现
  • 看Loktar 的回答

原来的：

如果你想要一个对称的椭圆，你总是可以创建一个半径宽度的圆，然后将它缩放到你想要的高度（编辑：注意这会影响笔画宽度的外观 - 请参阅 acdameli 的答案），但如果你想完全控制椭圆这是使用贝塞尔曲线的一种方法。

<canvas id="thecanvas" width="400" height="400"></canvas>

<script>
var canvas = document.getElementById('thecanvas');

if(canvas.getContext) 
{
  var ctx = canvas.getContext('2d');
  drawEllipse(ctx, 10, 10, 100, 60);
  drawEllipseByCenter(ctx, 60,40,20,10);
}

function drawEllipseByCenter(ctx, cx, cy, w, h) {
  drawEllipse(ctx, cx - w/2.0, cy - h/2.0, w, h);
}

function drawEllipse(ctx, x, y, w, h) {
  var kappa = .5522848,
      ox = (w / 2) * kappa, // control point offset horizontal
      oy = (h / 2) * kappa, // control point offset vertical
      xe = x + w,           // x-end
      ye = y + h,           // y-end
      xm = x + w / 2,       // x-middle
      ym = y + h / 2;       // y-middle

  ctx.beginPath();
  ctx.moveTo(x, ym);
  ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
  ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
  ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
  ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
  //ctx.closePath(); // not used correctly, see comments (use to close off open path)
  ctx.stroke();
}

</script>

这是其他地方解决方案的简化版本。我画了一个规范圆，翻译和缩放，然后描边。

function ellipse(context, cx, cy, rx, ry){
        context.save(); // save state
        context.beginPath();

        context.translate(cx-rx, cy-ry);
        context.scale(rx, ry);
        context.arc(1, 1, 1, 0, 2 * Math.PI, false);

        context.restore(); // restore to original state
        context.stroke();
}

现在有一个用于画布的原生椭圆函数，与 arc 函数非常相似，尽管现在我们有两个半径值和一个非常棒的旋转。

椭圆（x，y，radiusX，radiusY，旋转，startAngle，endAngle，逆时针）

现场演示

ctx.ellipse(100, 100, 10, 15, 0, 0, Math.PI*2);
ctx.fill();

目前似乎只能在 Chrome 中使用

贝塞尔曲线方法非常适合简单的椭圆。为了获得更多控制，您可以使用循环绘制具有不同 x 和 y 半径值（半径、半径？）的椭圆。

添加一个 rotationAngle 参数允许椭圆围绕其中心旋转任意角度。可以通过更改循环运行的范围 (var i) 来绘制部分椭圆。

以这种方式渲染椭圆可以让您确定线上所有点的确切 x,y 位置。如果其他对象的位置取决于椭圆的位置和方向，这将很有用。

这是代码的示例：

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
    xPos = centerX - (radiusX * Math.sin(i)) * Math.sin(rotationAngle * Math.PI) + (radiusY * Math.cos(i)) * Math.cos(rotationAngle * Math.PI);
    yPos = centerY + (radiusY * Math.cos(i)) * Math.sin(rotationAngle * Math.PI) + (radiusX * Math.sin(i)) * Math.cos(rotationAngle * Math.PI);

    if (i == 0) {
        cxt.moveTo(xPos, yPos);
    } else {
        cxt.lineTo(xPos, yPos);
    }
}

在此处查看交互式示例：http : //www.scienceprimer.com/draw-oval-html5-canvas

您也可以尝试使用非均匀缩放。您可以提供 X 和 Y 缩放，因此只需将 X 或 Y 缩放设置为比另一个更大，然后绘制一个圆，您就会得到一个椭圆。