JavaScript Canvas moveTo 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas moveTo 方法。此方法对于在 HTML canvas 上绘制路径至关重要。它设置绘制操作的起始点，而不会产生任何可见的标记。
基本定义
moveTo 方法将绘图光标移动到指定的坐标，而 **不** 绘制任何内容。这就像在纸上提起一支笔并将其移动到新位置，然后才开始绘画一样。
此方法始终与其他路径绘制方法（如 lineTo、arc 或 quadraticCurveTo）一起使用。在 beginPath 之后调用它以开始一个新的子路径。
基本的 moveTo 用法
此示例演示了如何使用 moveTo 和 lineTo 绘制一条简单的直线。
<!DOCTYPE html>
<html>
<head>
<title>Basic moveTo 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); // Start point
ctx.lineTo(250, 150); // End point
ctx.stroke(); // Draw the line
</script>
</body>
</html>
在此基本示例中，我们创建了一个 canvas 元素并获取其 2D 渲染上下文。我们使用 beginPath 开始一个新路径。
moveTo 方法将起始点设置为 (50,50)。然后 lineTo 绘制一条线到 (250,150)。最后，stroke 使线条可见。
绘制多条线
此示例展示了如何使用 moveTo 绘制多条连接的线。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Lines with moveTo</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, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
在这里，我们使用多个 lineTo 调用创建一个正方形。初始 moveTo 将起始点设置在左上角。
每个 lineTo 都绘制到下一个角。closePath 连接回起始点。stroke 方法渲染完整的正方形轮廓。
不相连的路径
此示例演示了如何使用 moveTo 创建不相连的路径。
<!DOCTYPE html>
<html>
<head>
<title>Disconnected Paths</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 line
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
// Second disconnected line
ctx.moveTo(50, 100);
ctx.lineTo(150, 100);
// Third disconnected line
ctx.moveTo(50, 150);
ctx.lineTo(150, 150);
ctx.stroke();
</script>
</body>
</html>
此示例绘制了三条未连接的水平线。每条新的 moveTo 调用都会在不同的 y 坐标处启动一个新的子路径。
如果线之间没有 moveTo 调用，它们都会垂直连接。这表明了 moveTo 如何创建独立的路径段。
绘制三角形
此示例展示了如何使用 moveTo 和 lineTo 绘制三角形。
<!DOCTYPE html>
<html>
<head>
<title>Drawing a Triangle</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, 50); // Top point
ctx.lineTo(250, 150); // Bottom right
ctx.lineTo(50, 150); // Bottom left
ctx.closePath(); // Connect back to top
ctx.stroke();
</script>
</body>
</html>
在这里，我们通过连接三个点来创建一个三角形。moveTo 将起始点设置在顶部顶点 (150,50)。
两个 lineTo 调用绘制到下方的两个角。closePath 通过连接回起始点来完成形状。然后描边三角形轮廓。
具有多个 moveTo 的复杂形状
此示例使用多个 moveTo 调用演示了一个更复杂的形状。
<!DOCTYPE html>
<html>
<head>
<title>Complex Shape with moveTo</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
// First shape (house)
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(100, 200);
ctx.closePath();
// Roof
ctx.moveTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(200, 100);
// Door
ctx.moveTo(140, 200);
ctx.lineTo(140, 160);
ctx.lineTo(160, 160);
ctx.lineTo(160, 200);
ctx.stroke();
</script>
</body>
</html>
此示例绘制了一个具有多个组件的简单房屋形状。每个结构元素都以新的 moveTo 调用开始。
房屋主体是一个正方形。屋顶是它上面的一个三角形。门是底部的一个小矩形。所有部分都绘制在一个路径中，但它们是独立的子路径。
来源
在本文中，我们探讨了使用 moveTo 方法在 HTML canvas 上创建路径的各种技术。掌握此方法对于在 Web 应用程序中创建复杂的绘图和图形至关重要。
作者
列出 所有 JS Canvas 教程。