setLineDash用于设置Canvas虚线模式，接受数组定义实线与空白长度，奇数数组自动复制，空数组重置为实线；可配合lineCap: 'round'和整数坐标实现稳定点线；需注意跨浏览器兼容性及手动重置状态。
setLineDash 画虚线段的基本用法
setLineDash 是 Canvas 2D 上下文的方法，用来设置当前路径的虚线模式。它接受一个数字数组，数组元素交替表示「实线长度」和「空白长度」。比如 [5, 5] 就是 5 像素实线 + 5 像素空白，循环下去形成标准虚线。
- 数组长度为奇数时（如
[3]），Canvas 会自动复制一遍变成[3, 3]，所以[3]和[3, 3]效果一样 - 数组为空（
[]或[0]）时，等效于关闭虚线，恢复为实线 - 调用
setLineDash([])是重置虚线最稳妥的方式，不要依赖strokeStyle变更来“清除”虚线
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(200, 50);
ctx.setLineDash([5, 5]); // 虚线：5px 实 + 5px 空
ctx.stroke();
用 setLineDash 实现点线段（dot line）
点线段本质是「极短实线 + 较长空白」，但不能只靠 [1, 8] 这类组合——因为 Canvas 的抗锯齿和像素对齐会让 1px 线段在某些缩放或 DPI 下消失或模糊。
真正稳定的点线做法是：
- 使用
[0, 6]或[0, 8]：第一个值为 0 表示“无实线”，但 Canvas 会把 0 解释为“最小可渲染单位”，实际渲染成离散点 - 配合
lineCap: 'round'，让每个短线端点变圆，视觉上更接近“点” - 避免在非整数坐标上绘制，否则点会拉伸或半透明；用
Math.round(x)对齐像素
ctx.lineCap = 'round'; ctx.setLineDash([0, 8]); ctx.lineWidth = 2; ctx.stroke(); // 得到较清晰的点线效果
setLineDash 在不同浏览器/缩放下的兼容性问题
setLineDash 在所有现代浏览器中都支持（Chrome 36+、Firefox 27+、Safari 9+、Edge 12+），但行为差异集中在两点：
立即学习“前端免费学习笔记（深入）”；
- Safari（尤其 iOS）对小数值 dash 数组（如
[0.5, 4]）渲染不稳定，建议只用整数 - 高 DPI 屏幕（如 MacBook Retina）下，若 canvas 没做 devicePixelRatio 缩放适配，
setLineDash的像素单位仍按 CSS 像素计算，导致虚线看起来过密；需同步调整lineWidth和 dash 数组值 - Firefox 有时会在
fill()后残留虚线状态，务必在每次stroke()前显式调用setLineDash，别假设它保持上次值
容易被忽略的 reset 时机和副作用
setLineDash 的状态是上下文级的，会持续影响后续所有 stroke()，直到再次调用它或重置。常见疏漏：
- 在动画帧（
requestAnimationFrame）里只设一次虚线，结果后续帧全被污染 - 多个图层共用同一个
ctx，A 图层设了[2, 4]，B 图层忘了重置，就意外画出虚线 -
save()/restore()不保存setLineDash状态（这是 Canvas 规范缺陷），所以不能依赖它回滚
正确做法是：每次需要虚线前主动设，不需要时立刻 setLineDash([])。别省这一行。
