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)不影响画出来的形状(只有弧线)。
欢迎大家进行更详细测试。