CanvasRenderingContext2D: arc() 方法
CanvasRenderingContext2D.arc() 方法是 Canvas 2D API 的一部分，用于向当前子路径添加一个圆形弧线。
语法
js
arc(x, y, radius, startAngle, endAngle)
arc(x, y, radius, startAngle, endAngle, counterclockwise)
arc() 方法会创建一个以 (x, y) 为中心，半径为 radius 的圆形弧线。路径从 startAngle 开始，到 endAngle 结束，并根据 counterclockwise 参数（默认为顺时针）的方向绘制。
参数
x-
弧线中心的水平坐标。
y-
弧线中心的垂直坐标。
半径-
弧线的半径。必须是正数。
startAngle-
弧线开始的角度（以弧度为单位），从正 x 轴开始测量。
endAngle-
弧线结束的角度（以弧度为单位），从正 x 轴开始测量。
counterclockwise可选-
一个可选的布尔值。如果为
true，则在起始角度和结束角度之间逆时针绘制弧线。默认值为false（顺时针）。
返回值
无（undefined）。
示例
绘制一个完整的圆
此示例使用 arc() 方法绘制了一个完整的圆。
HTML
html
<canvas></canvas>
JavaScript
该弧线的 x 坐标为 100，y 坐标为 75，半径为 50。要绘制一个完整的圆，弧线从 0 弧度（0°）开始，到 2π 弧度（360°）结束。
js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
结果
演示不同的形状
此示例绘制了各种形状，以展示 arc() 的功能。
js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
// Draw shapes
for (let i = 0; i <= 3; i++) {
for (let j = 0; j <= 2; j++) {
ctx.beginPath();
let x = 25 + j * 50; // x coordinate
let y = 25 + i * 50; // y coordinate
let radius = 20; // Arc radius
let startAngle = 0; // Starting point on circle
let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
let counterclockwise = i % 2 === 1; // Draw counterclockwise
ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);
if (i > 1) {
ctx.fill();
} else {
ctx.stroke();
}
}
}
结果
规范
| 规范 |
|---|
| HTML # dom-context-2d-arc-dev |
浏览器兼容性
加载中…
另见
- 定义此方法的接口：
CanvasRenderingContext2D - 使用
CanvasRenderingContext2D.ellipse()来绘制椭圆弧线。