JavaScript Canvas 弧教程
最后修改于 2025 年 4 月 3 日
在本文中，我们探讨 JavaScript 中的 Canvas 弧方法。这些方法对于在 HTML canvas 上绘制圆、弧和饼图至关重要。掌握弧形对于创建圆形图形和可视化至关重要。
基本定义
Canvas 弧是指圆周的片段。arc 方法可以绘制完整的圆、部分圆和饼形楔形。弧形由中心点、半径、起始角和结束角以及方向定义。
主要的 arc 方法是 arc()，它创建一个圆形弧。arcTo() 方法在两个切线之间创建弧。角度以弧度测量（完整圆为 0 到 2π）。
基本圆绘制
此示例演示了如何在 canvas 上绘制一个简单的圆。
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Circle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 50, 0, Math.PI * 2);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
在这个基本示例中，我们创建了一个 canvas 元素并获取其 2D 渲染上下文。我们开始一个路径并调用 arc() 方法来定义一个圆。
弧形中心位于 (150,100)，半径为 50。角度从 0 到 2π (Math.PI * 2) 创建一个完整的圆。然后我们用蓝色和 3px 的宽度描边路径。
部分弧绘制
此示例展示了如何绘制一个部分弧（一个半圆）。
<!DOCTYPE html>
<html>
<head>
<title>Partial Arc</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 60, 0, Math.PI); // 0 to π radians (180 degrees)
ctx.strokeStyle = 'red';
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
在这里，我们通过指定从 0 到 π 弧度（180 度）的角度来绘制一个半圆。弧形中心位于 (150,100)，半径为 60 像素。
请注意，弧形是从起始角到结束角顺时针绘制的。为了更好的可见性，线条样式为红色和 5px 宽度。
填充弧（饼图切片）
此示例演示了如何创建一个填充的饼图切片。
<!DOCTYPE html>
<html>
<head>
<title>Filled Pie Slice</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(150, 100); // Center point
ctx.arc(150, 100, 70, 0, Math.PI / 2); // 0 to 90 degrees
ctx.closePath(); // Connect back to center
ctx.fillStyle = 'rgba(0, 128, 0, 0.7)';
ctx.fill();
ctx.strokeStyle = 'darkgreen';
ctx.stroke();
</script>
</body>
</html>
这通过首先移动到中心点，然后绘制一个 90 度弧（0 到 π/2 弧度），然后将路径闭合回中心点来创建饼图切片。
切片以半透明的绿色填充，并以深绿色勾勒。此技术对于创建饼图和圆形图很有用。
逆时针弧
此示例展示了如何以逆时针方向绘制弧形。
<!DOCTYPE html>
<html>
<head>
<title>Counter-Clockwise Arc</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(150, 100, 60, 0, Math.PI / 2, true); // Counter-clockwise
ctx.strokeStyle = 'purple';
ctx.lineWidth = 4;
ctx.stroke();
// Draw reference lines
ctx.beginPath();
ctx.moveTo(150, 100);
ctx.lineTo(210, 100);
ctx.moveTo(150, 100);
ctx.lineTo(150, 40);
ctx.strokeStyle = 'gray';
ctx.stroke();
</script>
</body>
</html>
这里的关键区别在于 arc() 的第六个参数设置为 true，这使得弧形以逆时针方向绘制。我们还绘制了参考线来可视化角度。
灰色线条显示了弧形的起始（3 点钟位置）和结束（12 点钟）点。紫色弧形沿与默认顺时针行为相反的方向绘制。
ArcTo 方法示例
此示例演示了 arcTo() 方法用于创建圆角。
<!DOCTYPE html>
<html>
<head>
<title>arcTo Method</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Draw a rectangle with rounded corner using arcTo
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.arcTo(300, 50, 300, 100, 50); // Top-right corner
ctx.lineTo(300, 200);
ctx.arcTo(300, 250, 250, 250, 50); // Bottom-right corner
ctx.lineTo(50, 250);
ctx.arcTo(0, 250, 0, 200, 50); // Bottom-left corner
ctx.lineTo(0, 100);
ctx.arcTo(0, 50, 50, 50, 50); // Top-left corner
ctx.closePath();
ctx.strokeStyle = 'orange';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
arcTo() 方法在两条线（切线）之间创建弧。它接受五个参数：两个控制点、一个终点和一个半径。
此示例绘制了一个所有四个角都圆化的矩形。每个角使用 50px 半径的 arcTo()。该方法自动计算平滑连接线的弧形。
来源
在本文中，我们探索了在 HTML canvas 上绘制弧形和圆形的各种技术。这些方法对于在 Web 应用程序中创建圆形图形、饼图和圆角形状至关重要。
作者
列出 所有 JS Canvas 教程。