坐标切线html5 Canvas画图6：曲线之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的红线。

    刷新页面，便可看到下图。

    

    不得不说这条红线很像一个钩子。
于是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个小时以上.
　　上帝: 还是让中国国家打进世界杯.