html5 canvas arcTo方法心得

arcTo方法要与moveTo方法塔配使用，比如：

ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.arcTo(x1,y1,x2,y2 ,r);

ctx.stroke();

(x0,y0) -> (x1,y1) -> (x2,y2) 这三个点构成一个"L"型，比如：

有了L型架子后，我们再弄一个半径为r的圆，让这个圆被L架子卡住，如下图：

 如上图所示，圆和L型架子相切那段弧线就是画出来的弧线部分。

弧线的大小取决于r的大小。如果r定义的比较大，那么L的两条边可以无限向两端延伸。如果架子大而r小，那么(x0,y0)->(x1,y1)这条边的长度可能影响到绘制效果。如上图，红色线条是最终画出来的效果。上图中如果将(x0,y0)与(x2,y2)互换，画出来的效果是不同的（不同的直线部分）。但如果L型两条边不大于r，那么互换(x0,y0)与(x2,y2)不影响画出来的形状（只有弧线）。

欢迎大家进行更详细测试。