上一篇文章说矩形是 HTML5 Canvas 提供的唯一原生图形绘制方法，这种说法不完全对，因为 Google 浏览器提供了绘制椭圆形的方法。

绘制椭圆形

绘制方法：

// 绘制椭圆形
// x:椭圆圆心的 x 轴坐标。
// y:椭圆圆心的 y 轴坐标。
// radiusX:椭圆长轴的半径。
// radiusY:椭圆短轴的半径。
// rotation:椭圆的旋转角度，以弧度表示(非角度度数)。
// startAngle:将要绘制的起始点角度，从 x 轴测量，以弧度表示(非角度度数)。
// endAngle:椭圆将要绘制的结束点角度，以弧度表示(非角度度数)。
// anticlockwise:可选，如果为 true，逆时针方向绘制椭圆 （逆时针）， 反之顺时针方向绘制。
context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise);

例如：

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

ctx.ellipse(100,100,80,50,0,0,Math.PI*2);
ctx.fillStyle="#058";
ctx.strokeStyle="#058";
ctx.fill();
ctx.stroke();

扩展椭圆形方法

我们可以通过直接扩展 CanvasRenderingContext2D 对象来弥补一些未实现对椭圆形支持的浏览器。

用 arcTo ，arc 来实现也比较简单，不需要复杂计算，由于 arcTo ，arc 只提供了绘制正圆弧的功能，要绘制椭圆弧，配合 scale 变形就可以实现。

推荐使用该方法，实现代码：

if (CanvasRenderingContext2D.prototype.ellipse == undefined) {
    CanvasRenderingContext2D.prototype.ellipse = function(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise) {
        this.save();
        this.translate(x, y);
        this.rotate(rotation);
        this.scale(radiusX, radiusY);
        this.arc(0, 0, 1, startAngle, endAngle, anticlockwise);
        this.restore();
    }
}