JavaScript Canvas Path2D 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas Path2D API。Path2D 对象允许您高效地创建、存储和重用复杂的路径。这对于性能敏感的画布应用程序至关重要。
基本定义
Path2D 是一个 JavaScript 接口，代表可以在画布上绘制的路径。它提供了创建可存储和多次重用之的复杂形状的方法。
Path2D 的主要优势是路径的可重用性和复杂图形的更好性能。Path2D 对象可与所有标准的画布路径方法（如 moveTo、lineTo 和 arc）配合使用。
基本 Path2D 用法
本示例演示了如何创建和绘制简单的 Path2D 对象。
<!DOCTYPE html>
<html>
<head>
<title>Basic Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a Path2D object
const path = new Path2D();
path.rect(50, 50, 200, 100);
// Draw the path
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke(path);
</script>
</body>
</html>
在这个基本示例中，我们创建一个 canvas 元素并获取其 2D 渲染上下文。然后，我们创建一个新的 Path2D 对象并向其中添加一个矩形。
该路径使用标准的 stroke 方法进行绘制，并将 Path2D 对象作为参数传递。这显示了创建和使用 Path2D 对象的最简单方法。
使用 Path2D 的复杂路径
本示例展示了如何使用 Path2D 创建更复杂的路径。
<!DOCTYPE html>
<html>
<head>
<title>Complex Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a complex Path2D object
const path = new Path2D();
path.moveTo(50, 50);
path.lineTo(150, 150);
path.lineTo(250, 50);
path.closePath();
// Draw the path
ctx.fillStyle = 'lightblue';
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.fill(path);
ctx.stroke(path);
</script>
</body>
</html>
在这里，我们使用类似于标准画布路径的 Path2D 方法创建了一个三角形路径。然后，为了获得视觉效果，该路径被填充并描边。
关键区别在于，此路径存储在 Path2D 对象中，可以重复使用多次，而无需重新定义路径命令。
使用 SVG 路径数据的 Path2D
本示例演示了如何从 SVG 路径数据创建 Path2D 对象。
<!DOCTYPE html>
<html>
<head>
<title>Path2D with SVG</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create Path2D from SVG path data
const svgPath = "M10 10 L90 10 L90 90 L10 90 Z";
const path = new Path2D(svgPath);
// Draw the path
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.lineWidth = 3;
ctx.fill(path);
ctx.stroke(path);
</script>
</body>
</html>
本示例展示了如何直接从 SVG 路径数据创建 Path2D 对象。SVG 字符串使用标准的路径命令，如 M (moveTo) 和 L (lineTo)。
当您想在画布图形中重用现有的 SVG 路径或处理来自设计工具的矢量图形时，这尤其有用。
重用 Path2D 对象
本示例演示了 Path2D 对象的可重用性。
<!DOCTYPE html>
<html>
<head>
<title>Reusing Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a star Path2D
const star = new Path2D();
star.moveTo(30, 0);
star.lineTo(40, 20);
star.lineTo(60, 20);
star.lineTo(45, 35);
star.lineTo(55, 55);
star.lineTo(30, 45);
star.lineTo(5, 55);
star.lineTo(15, 35);
star.lineTo(0, 20);
star.lineTo(20, 20);
star.closePath();
// Draw multiple stars
for (let i = 0; i < 5; i++) {
ctx.save();
ctx.translate(i * 80, i * 50);
ctx.fillStyle = `hsl(${i * 72}, 100%, 50%)`;
ctx.fill(star);
ctx.restore();
}
</script>
</body>
</html>
在这里，我们将一个复杂的星形创建为一个 Path2D 对象。然后，使用相同的路径在不同位置以不同颜色绘制多个星形。
这展示了 Path2D 的性能优势——复杂路径只定义一次，但可以渲染多次，并应用不同的变换。
合并 Path2D 对象
本示例展示了如何将多个 Path2D 对象合并为一个。
<!DOCTYPE html>
<html>
<head>
<title>Combining Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create individual shapes
const circle = new Path2D();
circle.arc(100, 100, 50, 0, Math.PI * 2);
const square = new Path2D();
square.rect(50, 50, 100, 100);
// Combine paths
const combined = new Path2D();
combined.addPath(circle);
combined.addPath(square);
// Draw the combined path
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill(combined);
</script>
</body>
</html>
本示例创建了两个独立的 Path2D 对象（一个圆和一个方块），然后使用 addPath 将它们合并到一个 Path2D 对象中。
合并后的路径随后以半透明的红色填充，展示了如何从更简单的组件构建复杂形状并一起渲染。
来源
在本文中，我们探讨了用于在 HTML canvas 上创建和重用复杂路径的 Path2D API。Path2D 对象为复杂图形提供了显著的性能优势，并实现了更好的代码组织。
作者
列出 所有 JS Canvas 教程。