html5 canvas轻量流程图工具核心是画布控制、状态管理与交互映射；通过节点/连线对象化存储、鼠标事件驱动拖拽重绘、canvas.todataurl导出png及快照实现撤销，数百行代码即可构建可用工具。
用 HTML5 Canvas 实现轻量级网页流程图工具，核心在于“画布控制 + 状态管理 + 交互映射”，不依赖重型框架也能跑得稳。关键不是堆功能，而是把节点、连线、拖拽、重绘这四件事理清楚。
Canvas 初始化与基础绘图准备
先在页面中放一个 canvas 元素，设好宽高和边框便于调试：
JavaScript 中获取上下文并保存初始状态：
- 调用 getContext('2d') 获取绘图环境
- 设置 ctx.lineCap = 'round' 和 ctx.lineJoin = 'round' 让箭头和转角更自然
- 用 ctx.save() / ctx.restore() 封装绘制逻辑，避免样式污染
- 建议启用设备像素比缩放（devicePixelRatio），防止高清屏下线条发虚
节点与连线的结构化表示
别直接在 canvas 上硬画图形，先用 JS 对象描述流程图语义：
- 每个节点是对象：{ id: 'start', type: 'start', x: 100, y: 80, width: 120, height: 60 }
- 每条连线是对象：{ from: 'start', to: 'login', points: [[160,110],[240,110]] }（支持折线）
- 所有节点和连线分别存进数组（如 nodes = []、edges = []），便于遍历渲染和逻辑判断
- 绘制时统一走 renderNode() 和 renderEdge() 函数，保持可维护性
拖拽与交互的核心逻辑
流程图的灵魂是可操作性，重点处理三类事件：
- 鼠标按下（mousedown）：遍历 nodes 判断是否点中某个节点（用矩形碰撞检测），记录选中 ID 和相对偏移
- 鼠标移动（mousemove）：若已选中节点，则更新其 x/y 坐标；同时调用 clearRect() 清空画布，再全量重绘
- 鼠标释放（mouseup）：清除选中状态，触发一次 layout 更新（比如自动调整连线端点位置）
- 额外加个双击事件，在空白处弹出节点类型选择菜单（开始/处理/判断/结束），提升效率
轻量但实用的增强点
真正让工具“可用”而非“能画”，这几个小改进很关键：
- 连线末端加箭头：用 ctx.beginPath() → moveTo() → lineTo() → lineTo() → fill() 画三角形箭头，比 SVG 简洁
- 节点悬停高亮：监听 mousemove，用 isPointInPath() 快速检测光标是否在某节点路径内，临时加描边
- 导出为 PNG：调用 canvas.toDataURL('image/png')，生成 base64 链接供下载
- 撤销一步：用数组存 nodes 和 edges 的快照（深拷贝），最多保留 10 步即可，内存开销极小
不复杂但容易忽略：Canvas 是位图，没有 DOM 节点概念，所以所有交互都要靠坐标计算和状态映射。只要结构清晰、绘制分离、事件节制，几百行代码就能撑起一个真实可用的轻量流程图工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
