canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结-

首先我们来看一下canvas自带的绘制椭圆的方法

ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)。

参数（从左到右）：

(起点x,起点y,半径x,半径y,旋转的角度，起始角，结果角，顺时针还是逆时针)

我们来看canvas自带的绘制椭圆的方法代码：

    
    



    当前浏览器不支持Canvas，请更换浏览器后再试

canvas画的椭圆效果如下：

canvas椭圆效果如下：

二、canvas画椭圆之使用贝赛尔曲线绘制椭圆

这种方法绘制椭圆是把一个椭圆分成了4条贝塞尔曲线，用他们连成了一个椭圆。

canvas绘制椭圆的代码如下：

    
    



    当前浏览器不支持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社区 。

以上就是canvas如何来绘制一个椭圆形?canvas画椭圆的方法总结的详细内容，更多请关注 第一PHP社区 其它相关文章！