码迷,mamicode.com
首页 > Web开发 > 详细

html5 绘制椭圆

时间:2015-07-22 16:18:00      阅读:371      评论:0      收藏:0      [点我收藏+]

标签: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进行缩放,然后进行绘制,应当注意到的是会对圆心也进行缩放这点要注意。


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

html5 绘制椭圆

标签:html5 绘制椭圆

原文地址:http://blog.csdn.net/u012251421/article/details/47003415

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!