HTML5中Canvas虚线SetLineDash与偏移量设置-H5教程-PHP中文网

Canvas虚线通过setLineDash()设置实线与空白段长度序列，lineDashOffset控制整体偏移实现动态效果；仅对stroke()生效，需在beginPath()后、stroke()前调用，动画中递增offset可模拟流动虚线。

html5中canvas虚线setlinedash与偏移量设置

Canvas 中的虚线效果通过 setLineDash() 设置，配合 lineDashOffset 可控制虚线起始位置，实现动态偏移或对齐效果。

setLineDash() 基本用法

该方法接收一个数组，定义虚线的“实线段长度”和“空白段长度”交替序列：

ctx.setLineDash([5, 5])：5px 实线 + 5px 空白，循环绘制
ctx.setLineDash([10, 2, 2, 2])：10px 实线 → 2px 空白 → 2px 实线 → 2px 空白（四段循环）
传入空数组 [] 或 [0] 可恢复为实线

lineDashOffset 控制起始偏移

它是一个数值，表示整个虚线图案沿路径方向整体平移的距离（单位：像素），正值向终点方向偏移，负值向起点方向偏移：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

ctx.lineDashOffset = 2.5：虚线图案整体顺延 2.5px，常用于让虚线从实线段中间开始，避免“断头”感
动画中可逐帧递增该值，实现虚线流动效果（如加载指示器）
注意：偏移量是累积的，每次重绘前需手动重置或按需更新

实际使用注意事项

虚线行为受当前路径、线宽、线条连接方式等影响，需留意以下细节：

虚线只对 stroke() 生效，fill() 和 clip() 不支持
在 beginPath() 后、stroke() 前调用 setLineDash() 才会生效
圆弧路径（arc()）上虚线可能因曲率导致视觉不均，建议用短直线段近似替代高精度虚线圆
某些旧版 Safari 对非整数偏移支持不稳定，生产环境建议测试或取整处理

简单动画示例（虚线流动）

只需在动画循环中更新偏移量即可：

let offset = 0;
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.setLineDash([6, 4]);
  ctx.lineDashOffset = offset;
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(250, 50);
  ctx.stroke();
  offset = (offset + 0.5) % 10; // 循环偏移
  requestAnimationFrame(animate);
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！