html怎么把图片做成椭圆形,html5 作图椭圆

html5 绘制椭圆

最近的项目要使用html5 绘制椭圆，参考网上的例子发现可以使用贝塞尔曲线绘制，不过要绘制四条贝塞尔曲线。

在html5的过程中发现可以使用绘制圆形的方式来绘制椭圆

html5中绘制圆的函数如下：

arc(x,y,r,start,end,clockwise);具体函数的含义请自行查看，

实现的具体代码如下：

/**

*

* @param x 中心 x坐标

* @param y 中心 y坐标

* @param a 椭圆 a

* @param b 椭圆 b

* @param arcStart 起始角度

* @param arcEnd 结束角度

* @param clockwise 是否逆时针

*/

CanvasRenderingContext2D.prototype.ellipse=function(x,y,a,b,arcStart,arcEnd,clockwise)

{

var scale = b/a;

this.save();

this.scale(1,scale);

this.arc(x,y/scale,a,arcStart,arcEnd,clockwise);

this.restore();

}

实现的核心代码是scale函数的使用，这个函数的意义是对当前画笔的x和y进行缩放，然后进行绘制，应当注意到的是会对圆心也进行缩放这点要注意。

版权声明：本文为博主原创文章，未经博主允许不得转载。