HTML5 Canvas实现交互式流程图的关键是状态可控、响应准确、重绘高效；通过设备像素比适配高清屏，用JS对象建模节点与连线，结合拖拽选中、悬停反馈、PNG导出和撤销功能构建轻量编辑器。
用 HTML5 Canvas 实现交互式流程图，关键不在画得多炫，而在“状态可控、响应准确、重绘高效”。它不是静态图，而是可拖拽、可连接、可导出的轻量级编辑器，几百行核心代码就能跑起来。
画布初始化与高清适配
Canvas 的宽高必须用 JS 直接设置像素值，不能只靠 CSS 拉伸，否则在 Retina 屏上会模糊。建议按设备像素比缩放：
- 获取
devicePixelRatio，比如为 2 时，把 canvas 的width和height设为样式宽高的两倍 - 同时用
ctx.scale(ratio, ratio)缩放绘图上下文，保持坐标逻辑不变 - 设置
ctx.lineCap = 'round'和ctx.lineJoin = 'round'，让连线转角和箭头更自然 - 用
ctx.save()/ctx.restore()封装绘制函数，避免样式（如 fillStyle、lineWidth）污染后续绘制
节点与连线的数据建模
别直接在画布上硬画图形，先用纯 JS 对象描述语义结构：
- 每个节点是对象：
{ id: 'node1', type: 'process', x: 200, y: 150, width: 140, height: 60 } - 每条连线也是对象：
{ from: 'node1', to: 'node2', points: [[270,180],[350,180]] }（支持折线路径） - 所有节点存进
nodes = []，连线存进edges = []，便于遍历、查找、序列化 - 绘制统一走
renderNode()和renderEdge()，箭头用beginPath → moveTo → lineTo → lineTo → fill三角形实现，不依赖 SVG
拖拽与选中交互逻辑
交互的核心是三类事件协同：按下 → 移动 → 释放。重点在于“点中判断”和“坐标更新”：
立即学习“前端免费学习笔记（深入）”；
-
mousedown：遍历
nodes，用矩形碰撞检测（x ≤ mouse.x ≤ x+width且y ≤ mouse.y ≤ y+height）判断是否点中；记录被选中节点 ID 及鼠标相对偏移 -
mousemove：若已选中，则更新该节点的
x/y；每次移动都调用clearRect(0,0,w,h)清屏，再全量重绘所有节点和连线 - mouseup：清除选中状态；触发一次端点校准（例如将连线终点自动吸附到目标节点中心或边缘）
- 额外加 双击空白处 弹出菜单，插入新节点（开始/处理/判断/结束），提升操作效率
实用增强功能
真正让工具“能用”，这几个小功能缺一不可：
-
悬停反馈：监听
mousemove，对每个节点调用isPointInPath()判断光标是否在其路径内，临时加描边或半透明背景 -
导出 PNG：调用
canvas.toDataURL('image/png')生成 base64 字符串，创建 a 标签并触发下载 -
撤销一步：用数组保存
nodes和edges的深拷贝快照（如JSON.parse(JSON.stringify(...))），最多保留 10 步，点击撤销就恢复上一状态
