绘制相切弧arcTo

绘制相切弧

语法: CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius )

描述:

1. 该方法用于绘制圆弧
2. 绘制的规则是当前位置与第一个参考点连线, 绘制的弧与该直线相切.
3. 同时连接两个参考点, 圆弧根据半径与该连线相切

例如有一个起始点 ( 100, 100 ), 那么绘制其点. 颜色设置为红色.

    ctx.fillStyle = 'red';
    ctx.fillRect( 100 - 4, 100 - 4, 8, 8 );

然后两个参考点分别为 ( 100, 300 ) 和 ( 300, 300 ), 绘制出该点

    ctx.fillRect( 100 - 4, 300 - 4, 8, 8 );
    ctx.fillRect( 300 - 4, 300 - 4, 8, 8 );

连接两个参考点

    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo( 100, 300 );
    ctx.lineTo( 300, 300 );
    ctx.stroke();

得到效果为

 

调用 arcTo 方法绘制圆弧. 记得将起始点设置为 ( 100, 100 )

    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo( 100, 100 );

    ctx.arcTo( 100, 300, 300, 300, 100 );
    ctx.stroke();

得到效果