第75节绘制圆形(arc)

news/2025/2/27 8:37:48

在 HarmonyOS 开发中，如果你使用的是 TypeScript (TS) 语法，并且你正在处理画布（ Canvas ）相关的功能， arc 和 arcTo 是两个用于绘制弧线的 Canvas API 方法。下面是如何在 HarmonyOS 中使用这两个方法的详细说明。

arc 方法

arc 方法用于在画布上绘制一个圆弧或完整的圆。它的语法通常如下：

typescript 复制代码

context . arc ( x , y , radius , startAngle , endAngle , anticlockwise );

x 和 y ：圆弧中心的坐标。
radius ：圆弧的半径。
startAngle 和 endAngle ：圆弧的起始角度和结束角度，以弧度为单位。通常，0 度（或 0 弧度）表示正东方向（即 x 轴正方向），90 度表示正北方向（即 y 轴正方向），以此类推。
anticlockwise ：一个布尔值，如果为 true ，则按逆时针方向绘制圆弧；如果为 false ，则按顺时针方向绘制。

示例：

// 假设 context 是 CanvasRenderingContext2D 的实例

context . beginPath ();

context . arc ( 100 , 75 , 50 , 0 , Math . PI * 2 , false ); // 绘制一个完整的圆

context . stroke (); // 绘制路径

arcTo 方法

arcTo 方法用于在画布上绘制一条切线弧，该弧与两条给定的直线相切。它的语法通常如下：

typescript 复制代码

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

x1 和 y1 ：第一条直线的终点（也是弧的起点）的坐标。
x2 和 y2 ：第二条直线的起点（也是弧的潜在相切点）的坐标。
radius ：弧的半径。

注意： arcTo 方法会自动处理从当前点到 (x1, y1) 的直线段，并绘制一个与这条直线和 (x1, y1)到 (x2, y2) 的直线相切的弧。然后，它会继续绘制从弧的终点到 (x2, y2) 的直线（但不包括这一点，除非它是下一条路径命令的起点）。

示例：

// 假设 context 是 CanvasRenderingContext2D 的实例

context . beginPath ();

context . moveTo ( 20 , 20 ); // 设置起点

context . lineTo ( 100 , 20 ); // 绘制第一条直线

context . arcTo ( 150 , 20 , 150 , 75 , 50 ); // 绘制切线弧

context . lineTo ( 150 , 130 ); // 从弧的终点绘制到另一个点（不包括 (150, 75) ）

context . stroke (); // 绘制路径