JavaScript Canvas closePath 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas closePath 方法。此方法对于完成路径和在 HTML canvas 上创建闭合图形至关重要。理解 closePath 对于绘制多边形和复杂图形至关重要。
基本定义
closePath 方法用直线将路径的最后一个点连接到第一个点，从而创建一个闭合图形。它不同于手动绘制一条线到起点，因为它会处理子路径。
当与 beginPath 和 lineTo 等路径绘制方法一起使用时，closePath 会完成当前子路径。这对于填充或描边闭合图形特别有用。
基本的 closePath 用法
本示例演示了如何使用 closePath 绘制一个简单的三角形。
<!DOCTYPE html>
<html>
<head>
<title>Basic closePath</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.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
在此基本示例中，我们创建了一个 canvas 元素并获取其 2D 上下文。我们使用 beginPath 开始一个路径并移动到起点。
绘制两条线来创建三角形的两条边。closePath 会自动绘制第三条边来完成图形。最后，我们描边路径使其可见。
使用 closePath 填充图形
本示例展示了 closePath 如何创建可以填充的闭合图形。
<!DOCTYPE html>
<html>
<head>
<title>Filled Shape with closePath</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.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.fillStyle = 'lightblue';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
</body>
</html>
在这里，我们创建了与之前相同的三角形，但现在我们用颜色填充它。closePath 确保图形已正确闭合以便填充。
我们设置浅蓝色填充颜色并调用 fill，然后添加蓝色描边轮廓。这演示了 closePath 如何同时实现图形的填充和描边。
使用 closePath 的多个子路径
本示例演示了在单个图形中使用 closePath 的多个子路径。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Subpaths</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// First triangle
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(150, 50);
ctx.closePath();
// Second triangle
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(300, 50);
ctx.closePath();
ctx.fillStyle = 'pink';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>
</html>
此示例通过多次调用 moveTo 和 closePath 在一个路径中创建两个独立的三角形。每个三角形都是一个独立的子路径。
两个子路径一起被填充和描边。closePath 确保每个三角形在移动到下一个图形之前都已正确闭合。
使用 closePath 的复杂图形
本示例展示了如何使用 closePath 创建更复杂的图形。
<!DOCTYPE html>
<html>
<head>
<title>Complex Shape</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// Main rectangle
ctx.moveTo(100, 50);
ctx.lineTo(300, 50);
ctx.lineTo(300, 200);
ctx.lineTo(100, 200);
ctx.closePath();
// Cutout triangle
ctx.moveTo(150, 100);
ctx.lineTo(250, 100);
ctx.lineTo(200, 175);
ctx.closePath();
ctx.fillStyle = 'lightgreen';
ctx.fill();
ctx.strokeStyle = 'darkgreen';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
在这里，我们使用两个子路径创建一个带有三角形镂空的矩形。首先绘制主矩形并使用 closePath 闭合。
然后我们添加一个三角形子路径，当填充时它将作为镂空。偶数-奇数填充规则（默认）使三角形显示为矩形中的一个孔。
closePath 与弧线
本示例演示了如何使用 closePath 与弧线段创建图形。
<!DOCTYPE html>
<html>
<head>
<title>closePath with Arcs</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// Start at top center
ctx.moveTo(200, 50);
// Draw right semicircle
ctx.arc(200, 150, 100, -Math.PI/2, Math.PI/2);
// Draw left semicircle
ctx.arc(200, 150, 50, Math.PI/2, -Math.PI/2, true);
ctx.closePath();
ctx.fillStyle = 'rgba(200, 200, 0, 0.5)';
ctx.fill();
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
ctx.stroke();
</script>
</body>
</html>
本示例通过弧线和 closePath 创建了一个顶部平坦的甜甜圈形状。我们从顶部中心开始，并沿相反方向绘制两个半圆。
closePath 将最后一个弧线的末端连接回起点，从而创建了一个完整的图形。结果用半透明的黄色填充，并用橙色描边。
来源
在本文中，我们探讨了使用 closePath 在 HTML canvas 上创建闭合图形的各种技术。掌握此方法对于在 Web 应用程序中绘制多边形和复杂图形至关重要。
作者
列出 所有 JS Canvas 教程。