HTML DOM arcTo() 方法

定义和用法

arcTo() 方法使用使用切点和一个半径,来为当前子路径添加一条圆弧。

语法

arcTo(x1, y1, x2, y2, radius)

参数

参数 描述
x1, y1 点 P1 的坐标。
x2, y2 点 P2 的坐标。
radius 定义圆弧的圆的半径。

描述

这个方法为当前的子路径添加了一条圆弧,但是,它所描述的这条圆弧和 arc() 方法所描述的圆弧大不相同。添加给路径的圆弧是具有指定 radius 的圆的一部分。该圆弧有一个点与当前位置到 P1 的线段相切,还有一个点和从 P1 到 P2 的线段相切。这两个切点就是圆弧的起点和终点,圆弧绘制的方向就是连接这两个点的最短圆弧的方向。

在很多常见的应用中,圆弧开始于当前位置而结束于 P2,但情况并不总是这样。如果当前的位置和圆弧的起点不同,这个方法添加了一条从当前位置到圆弧起点的直线。这个方法总是将当前位置设置为圆弧的终点。

实例

可以用下面的代码绘制一个矩形的右上角(圆角):

c.moveTo(10,10);		//在左上方开始
c.lineTo(90,10);		//到达圆角开始点的水平线
c.arcTo(100,10,100,20,10);	//圆角
c.lineTo(100,100);		//到达右下方的垂直线

提示和注释

注释:这个方法在 Firefox 1.5 中未实现。

参阅

CanvasRenderingContext2D.arc()

VUE