JavaScript Canvas setLineDash 教程
最后修改于 2025 年 4 月 3 日
本教程将探讨 JavaScript 中的 Canvas setLineDash 方法。它允许在 HTML canvas 上为描边创建虚线或点线图案。掌握这项技术可以为您的绘图增加视觉多样性。
基本定义
setLineDash 方法用于指定描边的虚线图案。它接受一个数字数组，这些数字定义了交替的虚线和间隙长度。该图案会沿着描边的长度重复。
该方法适用于所有描边操作，包括直线、曲线和形状轮廓。它是 Canvas 2D API 的一部分，需要渲染上下文。
基本虚线
本示例演示了如何在 canvas 上创建简单的虚线。
<!DOCTYPE html>
<html>
<head>
<title>Basic Dashed Line</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([10, 5]);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
</script>
</body>
</html>
此代码创建了一条水平虚线。setLineDash([10, 5]) 设置了一个 10 像素的虚线和 5 像素的间隙的图案。该线从 (50,100) 绘制到 (250,100)，颜色为蓝色，宽度为 3 像素。
图案会自动沿着线条重复。您可以调整数字来创建不同的虚线-间隙比例。
复杂虚线图案
本示例展示了如何使用多个值创建更复杂的虚线图案。
<!DOCTYPE html>
<html>
<head>
<title>Complex Dash Pattern</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([20, 5, 5, 5]);
ctx.strokeStyle = 'red';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
这里我们使用了一个四值图案：[20,5,5,5]。这创建了一个长虚线 (20px)，后面跟着三个短间隙 (每个 5px)。图案会为整个路径重复。
路径形成了一个矩形轮廓。请注意虚线图案如何在角落处无缝延续。复杂的图案可以创造独特的视觉效果。
点线图案
本示例演示了如何使用 setLineDash 创建点线。
<!DOCTYPE html>
<html>
<head>
<title>Dotted Line Pattern</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([2, 5]);
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.stroke();
</script>
</body>
</html>
此代码创建了一个圆形的点线。图案 [2,5] 制作了非常短的虚线 (2px) 和较长的间隙 (5px)，有效地创建了点。为提高可见性，线宽设置为 2px。
该图案同样适用于圆形等曲线路径。点均匀分布在圆的周长上。
动态虚线动画
本示例展示了如何通过更改虚线偏移量来动画化虚线。
<!DOCTYPE html>
<html>
<head>
<title>Dash Animation</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let offset = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setLineDash([15, 5]);
ctx.lineDashOffset = -offset;
ctx.strokeStyle = 'purple';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
offset++;
if (offset > 20) offset = 0;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
本示例通过连续更改 lineDashOffset 属性来动画化虚线。偏移量沿着线条移动虚线图案，创建了“行进的蚂蚁”效果。
动画循环会清除 canvas，更新偏移量，然后重绘线条。偏移量在达到 20 后重置，以创建无缝循环。
形状的自定义虚线图案
本示例将不同的虚线图案应用于各种 canvas 形状。
<!DOCTYPE html>
<html>
<head>
<title>Shape Dash Patterns</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Rectangle with long dashes
ctx.setLineDash([20, 10]);
ctx.strokeStyle = 'orange';
ctx.lineWidth = 4;
ctx.strokeRect(50, 50, 100, 100);
// Circle with dotted pattern
ctx.setLineDash([3, 5]);
ctx.strokeStyle = 'teal';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.stroke();
// Triangle with alternating pattern
ctx.setLineDash([10, 5, 5, 5]);
ctx.strokeStyle = 'maroon';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 200);
ctx.lineTo(250, 250);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
本示例展示了三种具有独特虚线图案的不同形状。每种形状都使用了不同的 setLineDash 配置。
矩形有长虚线，圆使用点线图案，三角形有交替的虚线图案。这显示了虚线描边在不同形状中的通用性。
来源
本教程涵盖了使用 Canvas setLineDash 方法创建虚线和形状的各种技术。这些图案可以增强 canvas 绘图的视觉吸引力。
作者
列出 所有 JS Canvas 教程。