时间紧张,先记一笔,后续优化与完善。
上一篇文章讲了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的操作了。
刷新页面,便可看到下图。
不得不说这条红线很像一个钩子。
于是arcTo的律规就找到了,他是实其通过出发点,第1点,第2点的两条线直,组成了一个夹角,而这两条线,也是参数圆的切线。
其中圆的半径定决了圆会在什么位置与线条产生切边。就像一个球往一个死角里头滚,球越小就滚得越进去,越凑近死角;球大则反之。
这是一个很严正的学术题问,大家可不要YY。
让我们把球球变大吧!
ctx.arcTo(x1,y1,x2,y2,50); //半径改成50
当然,实际上他们还是相切的,因为切线是无穷长延的。
我们续继索探,把圆续继变大,把出发点与第1点的距离短缩。
var x0=400; //出发点x坐标从100变400 ... ctx.arcTo(x1,y1,x2,y2,100); //圆的半径变大到100
然后你就会看到这么个独特的图形。
本来是个钩子,在现被硬生生的掰弯了,还掰到反向方了!有点像酒瓶架了。
不过,大家注意看,这个圆依然是和两条线相切的!只是在现两条线的长度都足满不了这个圆了!他经已把两条线都无线长延了!
这个钩子柄什么时候会产生转反呢?如果你多少学的好,你可以试着解理一下点与圆的切线方程。。
arcTo方法中有个很要重的点,这个要重的点就是代码中的(x1,y1),只要他到圆的切点的距离,超过了他到出发点(x0,y0)的距离,就会产生转反。
从图中我们可以看到,(x2,y2)这个点的坐标可以无穷化变,只要他始终是切线上的一个点,那么在圆的半径稳定的情况下,arcTo画出的图形不会有任何化变。这点须要特别注意。
让我用我拿不台上面的多少知识来证验下这个命题吧。为了便利盘算,我先把两条线的夹角改成90度。
var x0=100, y0=400, x1 = 500, y1 = 400, x2 = 500, y2 = 450;
变动后就是90度张开了哟!我们保持球的半径稳定。刷新后:
我们把y2变大,也就是长延了一条切线,把他成变550,刷新后:
切线是长延了,但arcTo画出的红线没有任何化变。
文章结束给大家分享下程序员的一些笑话语录: 程序员的愿望
有一天一个程序员见到了上帝.上帝: 小伙子,我可以满足你一个愿望.程序员: 我希望中国国家队能再次打进世界杯.
上帝: 这个啊!这个不好办啊,你还说下一个吧!
程序员: 那好!我的下一个愿望是每天都能休息6个小时以上.
上帝: 还是让中国国家打进世界杯.