JavaScript Canvas beginPath 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas beginPath 方法。此方法对于在 HTML canvas 上绘制复杂形状和路径至关重要。掌握路径创建是创建自定义图形的关键。
基本定义
beginPath 方法通过清空子路径列表来开始一个新路径。当您想创建一条与任何先前路径分离的新路径时，会使用它。这可以防止形状之间出现不必要的连接。
路径由线条、圆弧和曲线等子路径组成。定义路径后，您可以对其进行描边或填充。beginPath 通常与 moveTo、lineTo 和 arc 方法一起使用。
beginPath 的基本用法
此示例演示如何使用 beginPath 绘制两条独立的线。
<!DOCTYPE html>
<html>
<head>
<title>Basic beginPath</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First line
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.strokeStyle = 'red';
ctx.stroke();
// Second line (separate from first)
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
</body>
</html>
在此基本示例中，我们创建了两条独立的水平线。第一条线是红色的，从 (50,50) 绘制到 (150,50)。第二条线是蓝色的，绘制在下方。
每条线都使用 beginPath 在自己的路径中绘制。没有它，第二条线将连接到第一条线，从而形成一个 L 形。
使用 beginPath 绘制多个形状
此示例展示了如何使用 beginPath 绘制多个独立的形状。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Shapes</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First rectangle
ctx.beginPath();
ctx.rect(50, 50, 80, 80);
ctx.fillStyle = 'lightblue';
ctx.fill();
ctx.strokeStyle = 'blue';
ctx.stroke();
// Second rectangle (independent)
ctx.beginPath();
ctx.rect(150, 50, 80, 80);
ctx.fillStyle = 'pink';
ctx.fill();
ctx.strokeStyle = 'red';
ctx.stroke();
</script>
</body>
</html>
在这里，我们绘制了两个具有不同填充和描边颜色的独立矩形。每个矩形都在其自己的路径中使用 beginPath 创建。
第一个矩形是浅蓝色带蓝色描边，第二个是粉红色带红色描边。没有 beginPath，属性会继续沿用。
使用 beginPath 绘制复杂路径
此示例演示了如何创建具有多个子路径的复杂形状。
<!DOCTYPE html>
<html>
<head>
<title>Complex Path</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// Main shape
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(200, 150);
// Hole in shape
ctx.moveTo(100, 100);
ctx.lineTo(150, 100);
ctx.lineTo(150, 130);
ctx.lineTo(100, 130);
ctx.closePath();
ctx.fillStyle = 'lightgreen';
ctx.fill();
ctx.strokeStyle = 'green';
ctx.stroke();
</script>
</body>
</html>
这会创建一个具有主体和孔的复杂形状。moveTo 方法会提起“画笔”，开始一个新子路径，而不会连接线条。
主形状是一个直角，而孔是内部的一个较小矩形。所有部分都在一个路径中，但使用 moveTo 分成子路径。
beginPath 与圆弧
此示例展示了如何在单个路径中组合圆弧和线条。
<!DOCTYPE html>
<html>
<head>
<title>Arcs and Lines</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// Start at left
ctx.moveTo(50, 100);
// Line to right
ctx.lineTo(200, 100);
// Arc back to left
ctx.arc(125, 100, 75, 0, Math.PI, true);
ctx.fillStyle = 'lightyellow';
ctx.fill();
ctx.strokeStyle = 'orange';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
这会创建一个带有直线和半圆形圆弧的形状。路径从 (50,100) 开始，绘制一条线到 (200,100)，然后沿圆弧回到起点。
arc 方法以 75px 的半径绘制一个 180 度（Math.PI 弧度）的圆弧。true 参数使其逆时针绘制。
多个独立路径
此示例演示了如何绘制具有不同样式的多个独立路径。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Paths</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First path - triangle
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(150, 50);
ctx.closePath();
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill();
// Second path - circle
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fill();
// Third path - custom shape
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(350, 250);
ctx.lineTo(250, 280);
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>
此示例创建了三个完全独立的路径：一个红色三角形、一个蓝色圆形和一个紫色自定义形状。每个都有自己的样式属性。
beginPath 调用确保每个形状都单独绘制，而不会影响其他形状。在使用不同的填充和描边样式时，这至关重要。
来源
在本文中，我们探讨了 beginPath 方法及其在创建复杂 canvas 图形中的重要性。正确的路径管理对于创建具有自定义样式的干净、独立的形状至关重要。
作者
列出 所有 JS Canvas 教程。