HTML 画布圆形
arc() 方法
可以使用 arc() 方法来定义一个圆形。
arc() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 必填。圆心横坐标 |
| y | 必填。圆心纵坐标 |
| radius | 必填。圆形半径 |
| startAngle | 必填。圆弧起始角度（以弧度表示） |
| endAngle | 必填。圆弧结束角度（以弧度表示） |
| counterclockwise | 可选。布尔值。如果设置为 true，则在起始和结束角度之间逆时针绘制圆弧。默认值为 false（顺时针） |
绘制一个完整的圆形
我们可以通过将 startAngle 定义为 0，将 endAngle 定义为 2 * PI 来使用 arc() 方法创建一个完整的圆形。
要在画布上绘制一个圆形，请使用以下方法：
-
beginPath()- 开始一条路径 -
arc()- 定义一个圆形 -
stroke()- 绘制它
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
动手试一试 »
用颜色绘制一个完整的圆形
向圆形添加填充颜色和描边颜色
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.lineWidth = 4;
ctx.strokeStyle = "blue";
ctx.stroke();
</script>
动手试一试 »
绘制一个半圆
这里我们将 endAngle 更改为 PI（而不是 2 * PI）
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, Math.PI);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
动手试一试 »
关于圆弧角度的更多信息
下图显示了圆弧中的一些角度
中心：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 绘制到结束角度 0.5 * PI 的圆弧
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI);
ctx.stroke();
</script>
动手试一试 »
示例
这里我们做同样的事情，但将 counterclockwise 参数设置为 true（它会在起始和结束角度之间逆时针绘制圆弧）
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 0.5 * Math.PI, true);
ctx.stroke();
</script>
动手试一试 »
