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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
css3实现可拖动的魔方3d效果
May 07 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
详解css3 flex弹性盒自动铺满写法
Sep 17 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
Sep 12 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
Jun 15 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
Jul 11 HTML / CSS
CSS link与@import的区别和用法解析
May 07 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
jquery入门必备的基本认识及实例(整理)
2013/06/24 Javascript
JS将秒换成时分秒实现代码
2013/09/03 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
Ajax基础知识详解
2017/02/17 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
node中Express 动态设置端口的方法
2017/08/04 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
使用Python程序抓取新浪在国内的所有IP的教程
2015/05/04 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
浅析python继承与多重继承
2018/09/13 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python pymsql模块的使用
2020/09/07 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
数学国培研修感言
2014/02/13 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
便利店促销方案
2014/02/20 职场文书
销售助理岗位职责
2014/02/21 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Python并发编程实例教程之线程的玩法
2021/06/20 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏