JavaScript Canvas getLineDash 教程
最后修改于 2025 年 4 月 3 日
本教程将深入探讨 JavaScript 中的 Canvas getLineDash 方法。此方法对于在 Canvas 绘图中处理虚线图案至关重要。学习如何有效地检索和操作虚线图案。
基本定义
getLineDash 方法返回当前的虚线图案。它与 setLineDash 配合使用来创建和检查虚线描边。该图案是一个数字数组，用于指定虚线/间隙的长度。
虚线可用于多种目的，例如焦点指示器、网格线或装饰性元素。理解 getLineDash 有助于在复杂的绘图中保持一致的虚线图案。
基本的 getLineDash 用法
此示例演示了如何检索默认的虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Basic getLineDash</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<p id="dashInfo"></p>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dashPattern = ctx.getLineDash();
document.getElementById('dashInfo').textContent =
`Default dash pattern: [${dashPattern}]`;
</script>
</body>
</html>
此代码在修改任何内容之前检索默认的虚线图案。该图案显示在 Canvas 下方的段落元素中。
默认情况下，getLineDash 返回一个空数组，表示实线。这为理解虚线图案的变化提供了一个基准。
获取当前虚线图案
此示例展示了在设置虚线图案后如何获取当前的虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Current Dash Pattern</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<p id="dashInfo"></p>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([10, 5, 3, 5]);
const dashPattern = ctx.getLineDash();
document.getElementById('dashInfo').textContent =
`Current dash pattern: [${dashPattern}]`;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
</script>
</body>
</html>
在这里，我们设置了一个复杂的虚线图案 [10,5,3,5]，然后使用 getLineDash 检索它。该图案的含义是：10px 虚线，5px 间隙，3px 虚线，5px 间隙，循环重复。
检索到的图案将被显示并用于绘制一条水平线。这演示了 getLineDash 如何反映当前状态。
绘制前的图案检查
此示例展示了如何在绘制前检查和修改虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Pattern Inspection</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Save current dash pattern
const originalDash = ctx.getLineDash();
// Set new pattern
ctx.setLineDash([15, 5]);
// Draw with new pattern
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();
// Restore original pattern
ctx.setLineDash(originalDash);
</script>
</body>
</html>
此代码演示了一种常见的图案工作流程：保存当前的虚线设置，应用新图案，绘制，然后恢复原始设置。
使用 getLineDash 存储原始图案可确保我们在临时修改后能够恢复到之前的状态。这在复杂的绘图操作中非常有用。
图案比较
此示例并排比较了不同的虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Pattern Comparison</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const patterns = [
{ pattern: [5, 5], y: 50, color: 'red' },
{ pattern: [10, 5], y: 100, color: 'blue' },
{ pattern: [15, 3, 3, 3], y: 150, color: 'green' },
{ pattern: [20], y: 200, color: 'purple' }
];
patterns.forEach(item => {
ctx.setLineDash(item.pattern);
const currentPattern = ctx.getLineDash();
console.log(`Pattern at y=${item.y}:`, currentPattern);
ctx.beginPath();
ctx.strokeStyle = item.color;
ctx.moveTo(50, item.y);
ctx.lineTo(350, item.y);
ctx.stroke();
});
</script>
</body>
</html>
此代码创建了四条具有不同虚线图案的线。每个图案都使用 getLineDash 记录到控制台进行检查。
这些图案展示了各种配置：相等的虚线/间隙，较长的虚线，复杂的图案，以及产生点的单个值图案。这有助于可视化不同图案的渲染方式。
动态图案调整
此示例展示了如何根据条件动态调整虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Adjustment</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
function drawDashedLine(x1, y1, x2, y2, baseLength) {
const currentPattern = ctx.getLineDash();
const newPattern = currentPattern.length === 0 ?
[baseLength, baseLength/2] :
currentPattern.map(v => v * 1.5);
ctx.setLineDash(newPattern);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
return newPattern;
}
// Draw progressively changing dashed lines
let lastPattern = [];
for (let i = 0; i < 5; i++) {
lastPattern = drawDashedLine(50, 50 + i*40, 350, 50 + i*40, 10);
console.log(`Line ${i+1} pattern:`, lastPattern);
}
</script>
</body>
</html>
此示例创建了一个函数，该函数使用动态图案绘制虚线。它会检查当前图案，然后创建一个新图案或修改现有图案。
后续的每一条线都会获得不同的图案——要么以 [10,5] 开始，要么将前一个图案乘以 1.5 倍。图案会被记录下来以显示进度。这演示了 getLineDash 的实际应用。
来源
本教程涵盖了 getLineDash 方法的各个方面。从基本检索到动态图案调整，这些示例提供了对 Canvas 中虚线处理的全面理解。
作者
列出 所有 JS Canvas 教程。