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

  发布时间:2013-01-09 14:17:27   作者:佚名   我要评论
arc与arcTo,从名字都能看出来相似。arcTo也是画曲线的方法,而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~,感兴趣的朋友可以了解下哦,接下来详细介绍arcTo方法的应用
上一篇文章讲了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的红线。
刷新页面,即可看到下图。

canvas arcTo


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

复制代码
代码如下:

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

canvas arcTo


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

复制代码
代码如下:

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

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度张开了哟!我们保持球的半径不变。刷新后:

canvas arcTo
我们把y2变大,也就是延长了一条切线,把他变成550,刷新后:

canvas arcTo
 
切线是延长了,但arcTo画出的红线没有任何变化。

相关文章

  • html5实现点击弹出图片功能

    本文通过实例代码给大家介绍html5实现点击弹出图片功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-07-15
  • html5 录制mp3音频支持采样率和比特率设置

    最初有个开源项目libmp3lame-js,直接将 lame 源码编译为 js版本,后来有人基于libmp3lame使用 js 进行了重写,就是如今的lamejs 项目。相比libmp3lame ,自身体积更小,而
    2021-07-12
  • html5表单的required属性使用

    本文将结合实例代码,介绍html5表单的required属性使用,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-05
  • html5调用摄像头实例代码

    本文给大家分享html5调用摄像头实例代码,代码简单易懂,对前端html5的学习有很大帮助,如果对html5调用摄像头相关知识感兴趣的朋友一起看看吧
    2021-06-28
  • HTML5页面音频自动播放的实现方式

    本文给大家分享三种常规的方法创建自动播放的audio对象,就每种方式通过实例代码给大家介绍的非常详细,对html5音频自动播放相关知识感兴趣的朋友一起看看吧
    2021-06-21
  • Html5大屏数据可视化开发的实现

    本文主要介绍了Html5大屏数据可视化开发,可视化可以对统计的数据一目了然,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-10
  • html实现弹窗的实例

    本文将结合实例代码,介绍html实现弹窗的实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-09
  • HTML5来实现本地文件读取和写入的实现方法

    最近有这样一个需求就是如何读取或写入本地文件系统中的文件, html5来了它提供了一套文件系统的API,可以实现文件读写,本文就介绍了如何实现本地文件的读取和写入,感兴
    2021-05-24
  • HTML 罗盘式时钟的实现

    看着有点黑科技的感觉就跟前段时间比较火的抖音动态时间那个一个效果,本文主要介绍了HTML 罗盘式时钟的实现,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们
    2021-05-20
  • HTML5简单实现添加背景音乐的几种方法

    网页上添加音乐是常见的,你知道几种方法?本文主要介绍了两种添加方法,感兴趣的小伙伴们可以参考一下
    2021-05-12

最新评论