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

我们把y2变大，也就是延长了一条切线，把他变成550，刷新后：

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