网站建设覀金手指科杰全国公共建筑信息平台
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>
结语
本文主要介绍了如何在图形中绘制虚线，对于文章中错误的地方或者有任何问题，欢迎在评论区留言分享！