Canvas arc() 方法
示例
创建圆形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
自己尝试 »
更多示例如下。
描述
The arc() 方法向路径添加一个圆弧（曲线）。
The arc() 方法创建一个圆或圆的一部分。
使用 stroke() 或 fill() 方法绘制路径。
中心: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
起始角度: arc(100, 75, 50, 0, 1.5 * Math.PI)
结束角度: arc(100, 75, 50, 0 * Math.PI, 1.5 * Math.PI)
注意
要创建圆形：将起始角度设置为 0，结束角度设置为 2*Math.PI。
要创建半圆：将起始角度设置为 0，结束角度设置为 Math.PI。
另请参阅
The beginPath() 方法 (开始新的路径)
The closePath() 方法 (关闭当前路径)
The moveTo() 方法 (将路径移动到某个点)
The lineTo() 方法 (向路径添加一条线)
The fill() 方法 (填充当前路径)
The stroke() 方法 (绘制当前路径)
The arcTo() 方法 (向路径添加一个圆)
The bezierCurveTo() 方法 (向路径添加一条曲线)
The quadraticCurveTo() 方法 (向路径添加一条曲线)
语法
| context.arc(x, y, r, sAngle, eAngle, counterclockwise) |
参数值
| 参数 | 描述 | 播放 |
|---|---|---|
| x | 圆形中心的 x 坐标 | 播放 » |
| y | 圆形中心的 y 坐标 | 播放 » |
| r | 圆形的半径 | 播放 » |
| sAngle | 起始角度，以弧度表示（0 在圆弧圆的 3 点钟位置） | 播放 » |
| eAngle | 结束角度，以弧度表示 | 播放 » |
| counterclockwise | 可选。指定绘制是逆时针还是顺时针。False 是默认值，表示顺时针，而 true 表示逆时针。 | 播放 » |
返回值
| 无 |
更多示例
示例
绘制一个橙色的圆形
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = "orange";
ctx.fill();
自己尝试 »
浏览器支持
The <canvas> 元素是 HTML5 标准 (2014)。
arc() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
