html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形


Posted in HTML / CSS onJanuary 09, 2013

在canvas中可以很方便的用arc方法画出圆形,本来圆形也可以看作是一个宽高相等的椭圆,但canvas中根本没有画椭圆的方法,我们要用其他方法来模拟。
我们首先要明确画一个椭圆需要那些参数,基本的几何知识告诉我们,椭圆需要圆心坐标,宽度,高度——或者还有旋转角度,不过这个可以暂时不要,旋转是比较容易的。
1,使用lineTo画椭圆
你没有看错,lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆!?但他确实存在,不过写法实在是有些不可思议:

复制代码
代码如下:

function DrawEllipse(Canvas,O,OA,OB){
//画椭圆,例子:var B=new Array(150,150); DrawEllipse(hb,B,50,30);
with (Canvas){
var x=O[0]+OA;
var y=O[1];
moveTo(x,y);
for (var i=0;i<=360;i++){
var ii=i*Math.PI/180;
var x=O[0]+OA*Math.cos(ii);
var y=O[1]-OB*Math.sin(ii);
lineTo(x,y);
}
}
}

这个方法的原理是,一个圆有360度,那么就用lineTo循环360次,画出每一度的线段,最终连成一个椭圆。其中需要用到三角函数正弦余弦进行计算。
注意,这个方法的第2个参数是个数组,即椭圆的圆心坐标.

思路很奇葩,而且画出的椭圆也比较平滑。但不值得大家使用——此方法每画一个椭圆,就要循环360次,只有画的椭圆稍微一多,对浏览器的性能就是个考验。
我们只用了解一下他的思路即可
2,使用arc画圆,然后把他缩放成一个椭圆
这个方法的原文在此,核心函数如下:

复制代码
代码如下:

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore()

此方法用了一个我前面还没讲过的canvas函数,即scale,他能实现canvas的缩放。缩放有水平和垂直两个方向,代码中把canvas水平方向放大了,而垂直方向不变,so,原来arc画出的圆形就变成了一个椭圆。
这个方法初看甚妙,代码少,而且原理浅显易懂。但分析一下就能发现他的明显缺点了,就是——不精确!比如我需要宽171高56的椭圆,此时我们如果把arc的半径定为28的话,那么后面就要为171/28/2这个蛋疼的不知所云的数字郁闷了。

不过有个折中的办法是始终把arc的半径设成100,然后,不够就放大,超过了就缩小。但是,还是不精确。
3,使用贝赛尔曲线bezierCurveTo
自从觉得上面的缩放法不精确后,我就很想找到一个精确的画椭圆的方法,最后在stackoverflow上找到了:

复制代码
代码如下:

function drawEllipse(ctx, x, y, w, h) {
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2) * kappa, // control point offset vertical
xe = x + w, // x-end
ye = y + h, // y-end
xm = x + w / 2, // x-middle
ym = y + h / 2; // y-middle
ctx.beginPath();
ctx.moveTo(x, ym);
ctx.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
ctx.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
ctx.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
ctx.closePath();
ctx.stroke();
}

这个方法可以算是比较完美的了。他把一个椭圆分成了4条贝塞尔曲线,用他们连成了一个椭圆。最后宽度高度也比较精确,开销也较少。
但此方法依然有缺点。大家看那个kappa参数,有个很奇特的值,相信很多人在几何专家告诉你为什么他要取这个值之前,都不明白为什么非要取这个值——我到现在还是不知道。并且我有很强烈的想把他改一下看看有什么后果的冲动。

当然我这种类似强迫症患者的冲动并不能说成是此方法的缺点,他真正的缺点是——为什么要用4条贝塞尔曲线?我个人觉得,一个椭圆明显是由两条贝塞尔曲线组成的而不是4条。这个想法最终让我找到了最完美的画椭圆的方法。
 4,使用两条贝赛尔曲线画出椭圆
为了了解上一个方法能否精简,我专门注册了一个stackoverflow的帐号去提问,由于问题里有图片,积分不够不能传,我还迫不得已用勉勉强强的英语水平去回答老外的问题挣积分。但最终好运到了,回答一个问题就解决了我的积分问题。
我提的贝赛尔曲线和椭圆的关系的问题在此.
说实话,下面老外的回答我大部分没看懂,但幸亏他提供了一个代码示例页,让我明白了原理,在此对他表示再次的感谢。而根据他的解答,我找到的画椭圆的方法如下:

复制代码
代码如下:

//椭圆
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这一点已经在代码中体现了。

大家可自行试验上面的4个方法画出椭圆。
如果你发现了更简单的方法,也请分享出来大家探讨吧。

HTML / CSS 相关文章推荐
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 HTML / CSS
CSS3新属性transition-property transform box-shadow实例学习
Jun 06 HTML / CSS
CSS3实现千变万化的文字阴影text-shadow效果设计
Apr 26 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
如何在Canvas中添加事件的方法示例
May 21 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
CSS3实现的文字弹出特效
Apr 16 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 #HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 #HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
You might like
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
20条学习javascript的编程规范的建议
2014/11/28 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
[03:55]2016国际邀请赛中国区预选赛首日TOP10精彩集锦
2016/06/27 DOTA
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Windows和Linux下使用Python访问SqlServer的方法介绍
2015/03/10 Python
浅谈python中的变量默认是什么类型
2016/09/11 Python
python实现顺时针打印矩阵
2019/03/02 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
管理部部长岗位职责
2013/12/05 职场文书
协议书模板
2014/04/23 职场文书
小学课外阅读总结
2014/07/09 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
公司慰问信范文
2015/03/23 职场文书
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS