HTML Canvas 圆形
arc() 方法
arc() 方法用于定义一个圆。
arc() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| x | 必需。圆弧中心的 x 坐标 |
| y | 必需。圆弧中心的 y 坐标 |
| radius | 必需。圆弧的半径 |
| startAngle | 必需。圆弧开始的角度（以弧度为单位） |
| endAngle | 必需。圆弧结束的角度（以弧度为单位） |
| counterclockwise | 可选。布尔值。如果设置为 true，则在开始和结束角度之间逆时针绘制圆弧。默认值为 false（顺时针） |
绘制一个完整的圆
我们可以使用 arc() 方法，将 startAngle 定义为 0，将 endAngle 定义为 2 * PI 来创建一个完整的圆。
要绘制一个圆在 canvas 上，请使用以下方法：
-
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>
自己动手试一试 »
