canvas元素在html5中是用于在浏览器中画图的，所以canvas可以实现绘制很多不同的图，那么，今天我们就来看一看canvas如何来绘制一个椭圆形，话不多说，让我们来直接看正文吧。
首先我们来看一下canvas自带的绘制椭圆的方法
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。
参数（从左到右）：
(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)
我们来看canvas自带的绘制椭圆的方法代码：
椭圆
canvas画的椭圆效果如下：
说明：这种方法目前似乎只有谷歌支持，其他浏览器还未存在ellipse()。
既然上述方法无法支持其他浏览器，我们就来看看其他canvas绘制椭圆的方法。
一、利用canvas画圆的方法来绘制一个椭圆
这种方法用到了一个canvas函数scale，scale函数能实现canvas的缩放。缩放有水平和垂直两个方向，代码中把canvas水平方向放大了，而垂直方向不变，因此，原来arc画出的圆形就变成了一个椭圆。
canvas绘制椭圆的代码如下：
canvas椭圆效果如下：
二、canvas画椭圆之使用贝赛尔曲线绘制椭圆
这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。
canvas绘制椭圆的代码如下：
椭圆
canvas椭圆效果如下：
三、canvas画椭圆之使用两条贝赛尔曲线画出椭圆
canvas绘制椭圆的代码如下：
//椭圆
CanvasRenderingContext2D.prototype.oval = function (x, y, width, height) {
var k = (width/0.75)/2,
w = width/2,
h = height/2;
this.beginPath();
this.moveTo(x, y-h);
this.bezierCurveTo(x+k, y-h, x+k, y+h, x, y+h);
this.bezierCurveTo(x-k, y+h, x-k, y-h, x, y-h);
this.closePath(); return this;
}注意：这个方法只需要记住这一点，椭圆的宽度与画出椭圆的贝赛尔曲线的控制点的坐标比例如下：
贝塞尔控制点x=(椭圆宽度/0.75)/2。
本篇文章到这里就结束了，更多精彩内容可以关注php中文网。
