了解CanvasRenderingContext2D.arcTo()

    简介

    CanvasRenderingContext2D.arcTo()作用是给路径添加圆弧,需要指定控制点和半径。

    绘制的弧为正圆的一部分,绝不可能是椭圆的一部分,如果想要绘制椭圆弧,可以试试bezierCurveTo()方法。arcTo()方法比较多的用途是绘制标准圆角。

    实际绘制的时候,并不总能成功绘制满足设定的圆弧。例如,则路径线条可能表现得更接近于直线;亦或者控制点2坐标在起始点和控制点1的中间,不足以绘制圆弧,我们起始点和两个控制点呈现角度过小,则我们的圆弧可能会飞到非常远的地方。具体表现可以操作下面的案例进行复现。

    语法

    context.arcTo(x1, y1, x2, y2, radius);

    参数

    各个参数含义和作用如下:

    x1
    Number
    第1个控制点的横坐标。
    y1
    Number
    第1个控制点的纵坐标。
    x2
    Number
    第2个控制点的横坐标。
    y2
    Number
    第2个控制点的纵坐标。
    radius
    Number
    圆弧的半径大小。

    案例

    下面这个案例主要演示两个控制点在圆弧生成时候的作用。其中包含两个控制点和一个位置固定的起始点:

    控制点1控制点2起始点

    拖动控制点1和控制点2,可以看到实时生成的圆弧效果(半径大小40),相信对arcTo()方法的渲染会有更直观的了解。

    JavaScript实时运行代码:

    context.beginPath();
    context.moveTo(50, 50);
    context.arcTo(150, 100, 200, 40, 40);
    context.lineTo(200, 40);
    context.stroke();

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.arcTo'
    现行标准 -

    相关资源

    暂无

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:32