html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法


Posted in HTML / CSS onJanuary 09, 2013

上一篇文章讲了canvas的arc方法,这一篇讲和他有关的arcTo方法。
arc与arcTo,从名字都能看出来相似。arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~
ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点,而且这两个点中并没有表示圆心的点,仅仅最后的参数是圆的半径,表示arcTo和圆有那么点关系。
网上关于arcTo的文章很少,好不容易找到一篇还是外国的;而且canvas画图木有直观工具,只能靠猜,arcTo害我猜了半天。。
为了直观的描述,我采取了一种辅助办法:arcTo画到哪里,我就用lineTo也画到相应的点,以查看他们的关系。就是画辅助线。

复制代码
代码如下:

var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 450,
y2 = 450;
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.strokeStyle = "#f00";
ctx.lineWidth = 2;
ctx.arcTo(x1,y1,x2,y2,20);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "rgba(0,0,0,0.5)";
ctx.lineWidth = 1;
ctx.moveTo(x0,y0);
ctx.lineTo(x1,y1);
ctx.fillText('x1,y1',x1+10,y1+10)
ctx.lineTo(x2,y2);
ctx.fillText('x2,y2',x2+10,y2)
ctx.stroke();

看起来代码有点多,其实很简单。我用了几个变量来保存坐标值,其余的都是canvas的操作了。
变量说明:x0,y0是起点坐标,x1,y1是第一个点坐标,x2,y2就是第二个点坐标。其中lineTo画的直线是半透明的1px黑线,arcTo画的线条是2px的红线。
刷新页面,即可看到下图。

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法


不得不说这条红线很像一个钩子。
于是arcTo的规律就找到了,他其实是通过起点,第1点,第2点的两条直线,组成了一个夹角,而这两条线,也是参数圆的切线。
其中圆的半径决定了圆会在什么位置与线条发生切边。就像一个球往一个死角里面滚,球越小就滚得越进去,越靠近死角;球大则反之。
这是一个很严肃的学术问题,大家可不要YY。
让我们把球球变大吧!
复制代码
代码如下:

ctx.arcTo(x1,y1,x2,y2,50); //半径改成50

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法


如图,你可以看到圆弧变得很大,甚至都不和直线相切了。
当然,实际上他们还是相切的,因为切线是无限延长的。
我们继续探索,把圆继续变大,把起点与第1点的距离缩短。
复制代码
代码如下:

var x0=400; //起点x坐标从100变400
...
ctx.arcTo(x1,y1,x2,y2,100); //圆的半径变大到100然后你就会看到这么个奇特的图形。

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法

本来是个钩子,现在被硬生生的掰弯了,还掰到反方向了!有点像酒瓶架了。
不过,大家注意看,这个圆依然是和两条线相切的!只是现在两条线的长度都满足不了这个圆了!他已经把两条线都无线延长了!
这个钩子柄什么时候会发生反转呢?如果你几何学的好,你可以试着理解一下点与圆的切线方程。
arcTo方法中有个很重要的点,这个重要的点就是代码中的(x1,y1),只要他到圆的切点的距离,超过了他到起点(x0,y0)的距离,就会发生反转。
从图中我们可以看到,(x2,y2)这个点的坐标可以无限变化,只要他始终是切线上的一个点,那么在圆的半径不变的情况下,arcTo画出的图形不会有任何变化。这点需要特别注意。
让我用我拿不上台面的几何知识来验证下这个命题吧。为了方便计算,我先把两条线的夹角改成90度。
复制代码
代码如下:

var x0=100,
y0=400,
x1 = 500,
y1 = 400,
x2 = 500,
y2 = 450;

更改后就是90度张开了哟!我们保持球的半径不变。刷新后:

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
我们把y2变大,也就是延长了一条切线,把他变成550,刷新后:

html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
 
切线是延长了,但arcTo画出的红线没有任何变化。

HTML / CSS 相关文章推荐
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5与css3小应用
Apr 03 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
Jan 27 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 #HTML / CSS
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
Jan 09 #HTML / CSS
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
Jan 09 #HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 #HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 #HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 #HTML / CSS
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
PHP日期函数date格式化UNIX时间的方法
2015/03/19 PHP
php单例模式的简单实现方法
2016/06/10 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
2016/07/27 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
在antd Form表单中select设置初始值操作
2020/11/02 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
利用aardio给python编写图形界面
2017/08/21 Python
python正则表达式之对号入座篇
2018/07/24 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python实现无边框进度条的实例代码
2020/12/30 Python
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
高三自我鉴定
2013/10/23 职场文书
毕业晚会主持词
2014/03/24 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
个人委托书范文
2015/01/28 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
python随机打印成绩排名表
2021/06/23 Python
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL