JavaScript Canvas lineTo 教程
最后修改于 2025 年 4 月 3 日
在本文中，我们将探讨 JavaScript 中的 Canvas lineTo 方法。此方法对于在 HTML canvas 上绘制点之间的直线至关重要。掌握 lineTo 方法对于创建复杂的路径和形状至关重要。
基本定义
lineTo 方法通过连接最后一个点到指定坐标来为当前子路径添加一条直线。它不会立即绘制线条 - 您需要调用 stroke 或 fill 来渲染它。
语法是 lineTo(x, y)，其中 x 和 y 是终点坐标。lineTo 与 moveTo 和 arc 等其他路径方法一起使用，以创建复杂的绘图。
基本 lineTo 用法
本示例演示了如何使用 lineTo 绘制简单的线条。
<!DOCTYPE html>
<html>
<head>
<title>Basic lineTo</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(250, 150);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
在这个基本示例中，我们创建了一个 canvas 元素并获取了它的 2D 渲染上下文。我们使用 beginPath 开始一个新路径并设置起点。
lineTo 方法绘制一条从 (50,50) 到 (250,150) 的线。我们设置描边属性并调用 stroke 来渲染线条。这展示了最简单的 lineTo 用法。
绘制多条线
本示例展示了如何使用 lineTo 绘制多条连接的线。
<!DOCTYPE html>
<html>
<head>
<title>Multiple 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();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.stroke();
</script>
</body>
</html>
在这里，我们通过绘制四条连接的线来创建一个正方形。每条 lineTo 都连接到前一个点。closePath 方法完成形状。
请注意我们如何链接多个 lineTo 调用。这会创建一个连续的路径。stroke 方法以指定的样式一次性渲染所有线条。
创建锯齿形图案
本示例演示了如何使用 lineTo 创建锯齿形图案。
<!DOCTYPE html>
<html>
<head>
<title>Zigzag Pattern</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 100);
for (let i = 0; i < 8; i++) {
const x = 50 + i * 40;
const y = i % 2 === 0 ? 50 : 150;
ctx.lineTo(x, y);
}
ctx.strokeStyle = 'green';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
此示例使用循环创建锯齿形图案。图案在顶部和底部点之间交替。模运算符控制交替。
每次迭代都会计算新坐标并添加线段。这展示了如何以编程方式使用 lineTo 高效地创建复杂图案。
绘制星形
本示例展示了如何使用 lineTo 绘制星形。
<!DOCTYPE html>
<html>
<head>
<title>Star Shape</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = 150;
const centerY = 150;
const radius = 100;
const spikes = 5;
ctx.beginPath();
for (let i = 0; i < spikes * 2; i++) {
const angle = (i * Math.PI / spikes) - Math.PI / 2;
const r = i % 2 === 0 ? radius : radius / 2;
const x = centerX + r * Math.cos(angle);
const y = centerY + r * Math.sin(angle);
if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
}
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.lineWidth = 4;
ctx.stroke();
</script>
</body>
</html>
此示例使用三角学计算创建了一个五角星。我们在外点和内点之间交替以形成星形。
for 循环使用余弦和正弦计算每个点的坐标。第一个点使用 moveTo，而后续点使用 lineTo。这会创建一个连续的星形路径。
交互式线条绘制
本示例演示了使用鼠标事件进行交互式线条绘制。
<!DOCTYPE html>
<html>
<head>
<title>Interactive Drawing</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;
let lastX = 0;
let lastY = 0;
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.strokeStyle = 'orange';
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
});
canvas.addEventListener('mouseup', () => isDrawing = false);
canvas.addEventListener('mouseout', () => isDrawing = false);
</script>
</body>
</html>
此示例创建了一个交互式绘图工具。用户可以通过单击并拖动鼠标来绘制线条。绘图会随着鼠标移动而进行。
鼠标事件控制绘图过程。mousedown 开始一个新路径，mousemove 在拖动时绘制线条，mouseup 停止绘图。lineCap 属性使线条看起来更平滑。
来源
在本文中，我们探索了使用 lineTo 在 HTML canvas 上创建线条和形状的各种技术。掌握此方法对于在 Web 应用程序中创建详细图形和交互式绘图至关重要。
作者
列出 所有 JS Canvas 教程。