当前位置：首页 > news >正文

Canvas基础篇：虚线操作setLineDash和lineDashOffset详解

news 来源：原创 2025/5/27 17:35:45

Canvas基础篇：虚线操作setLineDash和lineDashOffset详解

前言
setLineDash()
- 语法
- 效果预览
- 代码示例
- 参数说明
lineDashOffset
- 语法
- 效果预览
- 代码实现
结语

前言

在之前的文章中，我们如何设置线条的宽度、透明度、线帽等属性，本篇文章将讲述如何绘制虚线。

setLineDash()

setLineDash()：该方法接受一个数组，数组中的数值依次表示实线部分和空白部分的长度，两者交替绘制，形成一段虚线，其语法如下：

语法

ctx.setLineDash(segments);
segments是一个数组，数组中的偶数索引值代表实线部分的长度，奇数索引值代表空白部分的长度。要是数组的长度为奇数，那么这个数组会被复制一遍来形成偶数长度的数组。

效果预览

简单虚线

代码示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单虚线</title></head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');ctx.setLineDash([5]);ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(120, 20);ctx.stroke();</script></body>
</html>

参数说明

参数	说明	虚线形状
[]	数组为空，绘制一条直线
[2]	数组只有一个值，实线部分和空白部分的长度都为该值
[2,2]	数组有两个相同值，和[2]效果相同
[5,2]	数组有两个不同的值，实线部分长度为第一个值，空白部分长度为第二个值
[10,5,5,10]	参数有多个值，按照实线、空白、实线、空白…的顺序交替绘制

lineDashOffset

lineDashOffset：该属性属性用于设置虚线模式的起始偏移量，其语法如下：

语法

ctx.lineDashOffset = value;
value是一个数值，代表的是虚线模式的起始偏移距离，其单位为像素；如果value为正值，则虚线向左偏移；如果value为负值，则虚线向右偏移，我们先来看下面一段效果：

效果预览

虚线偏移

代码实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>虚线偏移</title>
</head><body><canvas id="canvas" width="400" height="400"></canvas><script>const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 第一条线：无偏移ctx.setLineDash([10,10]);ctx.lineDashOffset = 0;ctx.beginPath();ctx.moveTo(20, 20);ctx.lineTo(320, 20);ctx.stroke();// 第二条线：正偏移ctx.setLineDash([10,10]);ctx.lineDashOffset = 5;ctx.beginPath();ctx.moveTo(20, 40);ctx.lineTo(320, 40);ctx.stroke();// 第三条线：负偏移ctx.setLineDash([10,10]);ctx.lineDashOffset = -5;ctx.beginPath();ctx.moveTo(20, 60);ctx.lineTo(320, 60);ctx.stroke();// 第四条线：正偏移（整周期）ctx.setLineDash([10,10]);ctx.lineDashOffset = 20; ctx.beginPath();ctx.moveTo(20, 80);ctx.lineTo(320, 80);ctx.stroke();</script>
</body>
</html>