JavaScript Canvas arcTo 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas arcTo 方法。此方法可在直线或复杂曲线路径之间创建圆角。理解 arcTo 对于创建流畅、专业的图形至关重要。
基本定义
arcTo 方法在 canvas 上创建两条切线之间的弧。它需要五个参数：x1, y1, x2, y2 和 radius。弧通过曲线将当前点连接到新点。
与绘制完整圆或圆的一部分的 arc 不同，arcTo 在直线之间创建曲线。它对于创建圆角矩形或平滑路径过渡特别有用。
基本的 arcTo 示例
本示例演示如何使用 arcTo 绘制简单的曲线。
<!DOCTYPE html>
<html>
<head>
<title>Basic arcTo Example</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(50, 50);
ctx.arcTo(150, 50, 150, 150, 50);
ctx.lineTo(150, 150);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
此代码创建一个从 (50,50) 开始的路径。arcTo 方法采用控制点 (150,50) 和终点 (150,150)，半径为 50。
曲线通过控制点连接起点和终点。lineTo 在描边之前将路径完成到终点。
使用 arcTo 创建圆角矩形
本示例展示了如何使用 arcTo 创建带圆角的矩形。
<!DOCTYPE html>
<html>
<head>
<title>Rounded Rectangle</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
function roundedRect(x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius);
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.closePath();
}
roundedRect(50, 50, 200, 100, 20);
ctx.strokeStyle = 'green';
ctx.lineWidth = 4;
ctx.stroke();
</script>
</body>
</html>
此代码定义了一个 roundedRect 函数，该函数使用四个 arcTo 调用来创建圆角。每个角都通过绘制直线并用弧线连接它们来创建。
该函数接受位置、尺寸和圆角半径参数。这展示了 arcTo 在创建常见 UI 元素方面的实际应用。
带有多个 arcTo 的复杂路径
本示例使用 arcTo 创建带有多个曲线的复杂路径。
<!DOCTYPE html>
<html>
<head>
<title>Complex arcTo Path</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.arcTo(150, 50, 250, 100, 60);
ctx.arcTo(350, 150, 250, 200, 40);
ctx.arcTo(150, 250, 50, 200, 80);
ctx.arcTo(50, 100, 150, 50, 30);
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.lineWidth = 5;
ctx.stroke();
ctx.fillStyle = 'rgba(200, 100, 200, 0.3)';
ctx.fill();
</script>
</body>
</html>
此代码创建了一个带有四个 arcTo 调用的复杂闭合路径。每个 arcTo 在路径的各个段之间创建一个曲线，从而形成平滑、自然的形状。
路径被描边和填充，以演示 arcTo 如何用于创建具有平滑曲线的复杂填充形状。
交互式 arcTo 示例
本示例通过鼠标交互展示了 arcTo 的实际应用。
<!DOCTYPE html>
<html>
<head>
<title>Interactive arcTo</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let radius = 30;
function draw(x, y) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.arcTo(x, y, 350, 150, radius);
ctx.lineTo(350, 150);
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
ctx.stroke();
// Draw control point
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 5, 0, Math.PI * 2);
ctx.fill();
}
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
draw(e.clientX - rect.left, e.clientY - rect.top);
});
draw(200, 50);
</script>
</body>
</html>
此交互式示例会在鼠标移动时更新 arcTo 曲线。控制点（红点）跟随鼠标位置，显示 arcTo 对不同控制点的响应。
曲线始终连接从 (50,150) 到 (350,150)，鼠标位置决定控制点。这演示了 arcTo 的动态特性。
arcTo 与 arc 的比较
本示例将 arcTo 与简单的 arc 方法进行了比较。
<!DOCTYPE html>
<html>
<head>
<title>arcTo vs arc</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// arcTo example
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.arcTo(200, 50, 350, 100, 50);
ctx.lineTo(350, 100);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
// arc example for comparison
ctx.beginPath();
ctx.arc(200, 100, 100, Math.PI, 0);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
此代码显示了 arcTo（蓝色）和 arc（红色）方法创建的相似曲线。arcTo 曲线通过控制点连接两个点，而 arc 绘制标准的半圆形。
比较突出了何时使用每种方法：arcTo 用于通过曲线连接路径，而 arc 用于独立绘制圆形段。
来源
在本文中，我们探讨了用于在 HTML canvas 上创建曲线路径的 arcTo 方法。掌握 arcTo 对于在 Web 应用程序中创建专业、平滑的图形至关重要。
作者
列出 所有 JS Canvas 教程。