了解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 2019-10-18 01:44:03

     返回顶部