HTML5 Canvas中绘制椭圆的4种方法
概述HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同：1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4.a为椭圆横半轴长，5.b为椭圆纵半轴长。参数方程法该方法利用椭圆的参数方程来绘制椭圆代码如下://-----------用参数方程绘制椭圆---------------------//函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴、//纵半轴长度，不可同时为0//该方法的缺点是，当lineWidth较宽，椭圆较扁时//椭圆内部长轴端较为尖锐，不平滑，效率较低function ParamEllipse(context, x, y, a, b){
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max，表示度数的增加
//这样可以使得每次循环所绘制的路径（弧线）接近1像素
var step = (a > b) ? 1 / a : 1 /
context.beginPath();
context.moveTo(x + a, y); //从椭圆的左端点开始绘制
for (var i = 0; i < 2 * Math.PI; i += step)
//参数方程为x = a * cos(i), y = b * sin(i)，
//参数为i，表示度数（弧度）
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
context.closePath();
context.stroke();};均匀压缩法这种方法利用了数学中的均匀压缩原理将圆进行均匀压缩为椭圆，理论上为能够得到标准的椭圆.下面的代码会出现线宽不一致的问题，解决办法看5楼simonleung的评论。代码如下://------------均匀压缩法绘制椭圆--------------------//其方法是用arc方法绘制圆，结合scale进行//横轴或纵轴方向缩放（均匀压缩）//这种方法绘制的椭圆的边离长轴端越近越粗，长轴端点的线宽是正常值//边离短轴越近、椭圆越扁越细，甚至产生间断，这是scale导致的结果//这种缺点某些时候是优点，比如在表现环的立体效果（行星光环）时//对于参数a或b为0的情况，这种方法不适用function EvenCompEllipse(context, x, y, a, b){
context.save();
//选择a、b中的较大者作为arc方法的半径参数
var r = (a > b) ? a :
var ratioX = a / //横轴缩放比率
var ratioY = b / //纵轴缩放比率
context.scale(ratioX, ratioY); //进行缩放（均匀压缩）
context.beginPath();
//从椭圆的左端点开始逆时针绘制
context.moveTo((x + a) / ratioX, y / ratioY);
context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
context.closePath();
context.stroke();
context.restore();};三次贝塞尔曲线法一&&& 三次贝塞尔曲线绘制椭圆在实际绘制时是一种近似，在理论上也是一种近似。 但因为其效率较高，在计算机矢量图形学中，常用于绘制椭圆，但是具体的理论我不是很清楚。 近似程度在于两个控制点位置的选取。这种方法的控制点位置是我自己试验得出，精度还可以.代码如下://---------使用三次贝塞尔曲线模拟椭圆1---------------------//此方法也会产生当lineWidth较宽，椭圆较扁时，//长轴端较尖锐，不平滑的现象function BezierEllipse1(context, x, y, a, b){
//关键是bezierCurveTo中两个控制点的设置
//0.5和0.6是两个关键系数（在本函数中为试验而得）
var ox = 0.5 * a,
oy = 0.6 *
context.save();
context.translate(x, y);
context.beginPath();
//从椭圆纵轴下端开始逆时针方向绘制
context.moveTo(0, b);
context.bezierCurveTo(ox, b, a, oy, a, 0);
context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
context.bezierCurveTo(-a, oy, -ox, b, 0, b);
context.closePath();
context.stroke();
context.restore();};三次贝塞尔曲线法二这种方法是从StackOverFlow中一个帖子的回复中改变而来，精度较高，也是通常用来绘制椭圆的方法.代码如下://---------使用三次贝塞尔曲线模拟椭圆2---------------------//此方法也会产生当lineWidth较宽，椭圆较扁时//，长轴端较尖锐，不平滑的现象//这种方法比前一个贝塞尔方法精确度高，但效率稍差function BezierEllipse2(ctx, x, y, a, b){
var k = .5522848,
ox = a * k, // 水平控制点偏移量
oy = b * // 垂直控制点偏移量
ctx.beginPath();
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();};光栅法这种方法可以根据Canvas能够操作像素的特点，利用图形学中的基本算法来绘制椭圆。 例如中点画椭圆算法等。其中一个例子是园友&豆豆狗&的一篇博文&HTML5 Canvas 提高班（一） && 光栅图形学（1）中点画圆算法&。这种方法由于比较&原始&，灵活性大，效率高，精度高，但要想实现一个有使用价值的绘制椭圆的函数，比较复杂。比如，要当线宽改变时，算法就复杂一些。虽然是画圆的算法，但画椭圆的算法与之类似，可以参考下。总结&基本上所有的方法都不可能达到100%精确，因为受显示器分辨率的限制。其实最好的方法应该是arc()+scale()。canvas绘图库KineticJS就是用的这种方法。在其他绘图软件中，不像HTML5的canvas那样提供固有的arc()+scale()方法，通常用贝塞尔曲线模拟近似椭圆，无论是几条贝塞尔曲线都是近似而已。关于用贝塞尔曲线模拟椭圆，可以参考这份资料：Drawing an elliptical arc using polylines, quadratic or cubic Bezier curves。由于arc()+scale()是浏览器已经实现的方法，理论上精度最高，所以从效率、精确度和简单易用程度上来讲，都是最佳的。在用arc()+scale()绘制完椭圆后，context.stroke()和 context.restore()两个方法调用的先后顺序不同，产生的结果会很有意思的。通常应该先restore()再stroke()。 Demo下面是除光栅法之外，几个绘制椭圆函数的演示，演示代码如下：代码如下:
清理注意，要成功运行代码，需要支持HTML5的Canvas的浏览器。
抹香鲸剥制标本和骨骼标本陈列在上海海洋大学博物馆中本版图片/晨报记者陈征见习记者肖翔昨日，本报报道了上海野生动物园幼虎与游客零距离拍照被戏虐一事，引发了社会的广
扬州发布11月26日消息，近日，媒体连续报道了高邮&恶婆婆&谣言事件。就因为一则婆婆虐待逼死儿媳的谣言，引发上百人围观，死者的婆婆和丈夫也受到谩骂、围攻，一度不
11月26日上午，国务院江西丰城发电厂&11&24&冷却塔施工平台坍塌特别重大事故调查组在江西省丰城市召开第一次全体会议，安排部署调查工作。会议要求国务院事故调
11月26日上午，国务院江西丰城发电厂&11&24&冷却塔施工平台坍塌特别重大事故调查组在江西省丰城市召开第一次全体会议，安排部署调查工作。会议要求国务院事故调
#长江日报快讯#在江西丰城电厂发生事故的冷却塔外，家属们点燃纸钱和鞭炮，祭奠亡灵。空气中弥漫着哀伤的气息。（长江日报记者汪洋）#长江日报快讯#【丰城电厂事故伤者
央视新闻客户端11月26日消息，11月24日发生在江西宜春丰城的电厂事故造成74人遇难2人受伤。这是近十几年来电力行业伤亡最严重的事故。11月26日有关此次事故
上周(11月18日)，一对河北曹家务村的父子，在法庭受审。父亲已经78岁。两人因扎死了夜砸他家的拆迁人员，被控故意伤害罪。而另外两个拆迁人员被控寻衅滋事罪。拆迁
央视新闻客户端11月26日消息，免费提供出境路费、吃饭住店不花钱、想玩两把时，&不花钱&的筹码便会送到你手上&&打着所谓的&零成本&
人民网盘点：不可忽视的&心事儿&
中小学体育课上,仰卧起坐是最常见的运动项目之一,尤其是从小学三年级开始,男生女生都得参加考核,一分钟40多次才能达到优秀。可是,最近一则关于仰卧起坐的传言让爸妈
工人日报11月26日报道，因公殉职与工伤之间是什么关系？因公殉职后必然会被认定为工伤吗？现实生活中，因公殉职常常发生在军人或警察中，普通人能因公殉职吗？在四川乐
火灾现场消防救援齐鲁网11月26日讯：日09时13分，济南市公安消防支队指挥中心接到群众报警称：位于济南市高新区草山岭东区二号楼发生火灾，指
#微天下#【泉州三盛集团一厂房发生火灾】今日中午11时30分左右，泉州市区坪山路与东湖街交叉口附近，从事塑料制品的三盛集团一厂房发生火灾。泉州消防已调派十多辆消
&市民很无辜，养殖户很惨。&11月24日下午，提起在网上传播多日的&北京市淡水活鱼停售&事件，北京市新发地市场宣传部部长詹家宝对澎湃新闻（www.thepape
据央广网11月25日报道，北京市商务委员会消息，截至25日12时，北京市各主要连锁超市的289家门店陆续恢复活鱼销售，约占连锁超市门店总数的八成。澎湃新闻记者走
新京报快讯(记者李禹潼)为警示买房人最大限度降低交易风险，二中院对2014年至今在执行程序中审查的买房人异议案件梳理发现，买房人异议占执行案外人异议案九成以上，
近日，安徽警方与云南、广西等地警方通力协作，经过四个多月的缜密侦查，破获了一起特大跨国拐卖妇女案，解救被拐卖越南籍妇女12名，摧毁了在中越边境地区盘踞多年的跨国
近日在朝阳区望京地铁站附近，多名独行女子称，在途经地铁站附近小树林时被一名陌生男子猥亵并殴打。其中一名受害者王女士称，她在健身后被一名男子猥亵并殴打头部，她大声
邓某被带进法庭时不住地向旁听席上望。京东卖家邓某被控通过自买自卖、给予好评的方式，在10个月内骗取京东公司价值800多万元的&京豆&。昨天上午，邓某涉嫌诈骗罪在
&证件办好了，但拿货得先交1000元安全保证金&&不交保证金，就拿你身份证去贷款&，一般人往往会在这样的连蒙带吓后就范，汇出的钱款最后变成&打狗的肉包子&。今年没有更多推荐了，
不良信息举报
举报内容：
画椭圆 - HTML5 Canvas 作图
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！没有更多推荐了，
不良信息举报
举报内容：
html5 绘制椭圆
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
互联网 & 03-25 15:13:42 & 作者：佚名 &
Canvas里绘制椭圆是一个很常见的需求，但是目前大多数浏览器还没有实现该方法，因此经常会使用arc或者arcTo方法结合scale变形来绘制椭圆，感兴趣的朋友可以了解下，希望可以帮助到你们
Canvas里绘制椭圆是一个很常见的需求，比较新的HTML Canvas 2D Context&W3C草案里面新增了ellipse方法绘制椭圆，但是目前大多数浏览器还没有实现该方法，所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。
示例代码：代码如下:&canvas width="400" height="300"&&/canvas&
var ctx = documentquerySelector('canvas')getContext('2d');
ctxlineWidth = "10";
ctxscale(1,2);
ctxarc(150,150,100,0,MathPI*2,false);
ctxstroke();
有点不对，因为线条粗细不均匀了，stroke也被scale影响了。
要修正这个问题，就要一点点小技巧了。
示例代码：代码如下:[code]&canvas width="400" height="300"&&/canvas&
var ctx = documentquerySelector('canvas')getContext('2d');
ctxlineWidth = "10";
ctxsave();
ctxscale(1,2);
ctxarc(150,150,100,0,MathPI*2,false);
ctxrestore();
ctxstroke();
现在均匀了，非常完美。
技巧就在先save保存画布状态，然后缩放、调用路径指令，再restore恢复画布状态，再stroke绘制出来。
关键点是先save后缩放，先restore后stroke.
大家感兴趣的内容
12345678910
最近更新的内容博客分类：
&!doctype html&
&title&画出一个椭圆&/title&
&!-- 画出我的画布 --&
&canvas id="can1" width="500px" height="500px" style="border:1px solid
black"&&/canvas&
&script type="text/javascript"&
//获取画布
var canvas = document.getElementById("can1");
//获取画笔
var cxt = canvas.getContext("2d");
cxt.beginPath();
//设置填充颜色
cxt.fillStyle = "red";
var a=120;
var b=160;
var x=250;
var y=250;
//选择a、b中的较大者作为arc方法的半径参数
var r = (a & b) ? a :
var ratioX = a / //横轴缩放比率
var ratioY = b / //纵轴缩放比率
cxt.scale(ratioX, ratioY); //进行缩放（均匀压缩）
//从椭圆的左端点开始逆时针绘制
cxt.moveTo((x + a) / ratioX , y / ratioY);
cxt.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
cxt.fill();
cxt.closePath();
浏览: 26135 次
来自: 大连
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'