关于canvas的学习心得（三）（计算错误）

任务描述：

1>制作一个手机端的手绘板
2>要求能有毛笔的笔锋
3>画线能有轻重感
4>能重播手写过程
5>能提交保存

现在，我们来着重解决第三个问题，画线能有轻重感，手指一接触触摸屏，js就会在相应的位置画上一个填充圆，然后缓慢的移动手指，会发现线条渐渐变粗，也就实现了重笔画的手写过程，手指仍然不要松开，现在我们突然加速，会发现，很突兀的一下，线条就变细了，经过多方的想法，最终我想到了一个办法。

两圆之间的公切线会让线条平滑。

但是两圆公切线怎么计算呢？

下面是初始计算公式：

如图：

A是圆1的圆心，AC是圆1的半径

B是圆2的圆心，BD是圆2的半径

C是圆1关于CD的切点，D是圆2关于CD的切点

那么有点到点的距离公式可以获得下面几个方程：

①（x1-x3）^2+(y1-y3)^2=AC^2

②（x2-x4）^2+(y2-y4)^2=BD^2

③（x1-x2）^2+(y1-y2)^2=AB^2

④（x2-x3）^2+(y2-y3)^2=BC^2

⑤（x1-x4）^2+(y1-y4)^2=AD^2

其中AC和BD已知，AB可以由两点之间的距离公式②算出。

过点A做BD的垂线，交点为E（x5,y5）

∵BE=BD-DE

DE=AC

∴BD=BD-AC

根据勾股定理可以得到：

⑥AE^2=AB^2-BE^2

公式①和④推导出如下公式：

y3(4(y1-y2)^2-(4x2-x1)^2)-2y3((2(y1-y2)(r2^2-r1^2+ED^2-(x2+x1)^2+(y1-y2)^2))-y1(4x2+x1)^2)+(r2^2-r1^2+ED^2-(x2+x1)^2+(y1^2-y2^2))^2-y1^2(4x2+x1)^2=0

可以得到一元二次方程式中的a,b,c分别为如下

假设y1=startY,x1=startX,x2=endX,y2=endY,r1=startW,r2=endW;

则可以得到如下表达式

$a=4*sqr($startY-$endY)-sqr($startX-4*$endX);//sqr函数是求平方函数，自己动手写的。

$b=2*(2*($startY-$endY)*(sqr($endW)-sqr($startW)-sqr($endX+$startX)+$ED+sqr($startY-$endY))-$startY*sqr(4*$endX+$startX));

$c=sqr(sqr($endW)-sqr($startW)+$ED-sqr($endX+$startX)+sqr($startY)-sqr($endY))-sqr($startY)*sqr(4*$endX+$startX);

求解：
最后得到如下表达式：

<span style="white-space:pre">     </span>$x1=(-$b+ sqrt(sqr($b)-4*$b*$c))/(2*$a);$x2=(-$b- sqrt(sqr($b)-4*$b*$c))/(2*$a);$y1=sqrt(sqr($startW)-sqr($x1-$startX))+$startY;$y2=sqrt(sqr($startW)-sqr($x2-$startX))+$startY;

经过运算，此算法错误。详情请参照下篇文章。