从零搭建交互式时间轴，到点亮每个关键节点； 一次性掌握「拖拽」「点击」以及动画控制的完整实战方案。

在hen多企业内部工具里常见的流程图要么依赖繁重的插件，要么只Neng展示静态图片。Canvas 的优势在于：

原生渲染：浏览器直接绘制，毫无额外体积负担。

像素级控制：每一条线、每一个圆douKe以精确定位。

灵活交互：配合 JavaScript 的鼠标、键盘事件，随时给元素绑定响应。

Zui关键的是——只要把数据准备好，一段通用函数就Neng把千变万化的业务需求转化为可视化图表。

const flowData = ;

字段解释：

time 事件发生的时间戳。

label 节点标题，支持任意中文或英文。

ratio 相对时间轴的位置，取值范围，越大越靠右。

{
   time:'10：20',
   label:'故障',
   ratio :0.78,
   color:'#e74c3c',
   onClick{ alert; }
}

当你想让某个节点在被点到时弹窗或跳转页面只需要在对象里写一个回调即可，后面的绘制函数会自动帮你绑定。

下面这段代码是整篇文章的“心脏”。它完成了四件事：

清空画布：防止残影。

绘制基准线：水平直线 + 尾部三角箭头。

遍历 data 渲染每个节点：

a) 根据ratio算出 X 坐标；

b) 奇偶交错放置 Y 坐标，使视觉geng舒适；

d) 用判断鼠标是否落在圆内，从而触发 click/hover；

若处于播放状态，还会绘制红色进度条：

function drawFlowChart{
    const w = ctx.canvas.width,
          h = ctx.canvas.height,
          axisY = h/2,
          r = 12;
    //① 清屏
    ctx.clearRect;
    //② 基准线
    ctx.beginPath;
    ctx.moveTo;
     ctx.lineTo;
     ctx.strokeStyle='#667eea';
     ctx.lineWidth=3;
     ctx.stroke;
     //箭头
     const arrowX = w*0.93;
     ctx.beginPath;
     ctx.moveTo;
     ctx.lineTo;
     ctx.lineTo;
     ctx.closePath;
     ctx.fillStyle='#667eea';
     ctx.fill;
   //③ 节点循环
   data.forEach=>{
       const x = w*item.ratio;
       const up = i%2===0;
       const y = up? axisY-80 : axisY+80;
       //连线
       ctx.beginPath;
       ctx.moveTo;
       ctx.lineTo;
       ctx.setLineDash;
       ctx.strokeStyle='#bbb';
       ctx.stroke;
       ctx.setLineDash;
       //圆形节点
       const fillC = item.color || ;
       ctx.beginPath;
       ctx.arc;
       ctx.fillStyle=fillC;
       ctx.fill;
       ctx.strokeStyle='#fff';
       ctx.lineWidth=3;
       ctx.stroke;
      //文字标签
      ctx.font='14px "Microsoft YaHei",sans-serif';
      ctx.textAlign='center';
      ctx.textBaseline='middle';
      ctx.fillStyle='#333';
      const txtY = up? y-30 : y+30;
      ctx.fillText;
      //时间戳
      if{
         ctx.font='12px "Microsoft YaHei",sans-serif';
         const tY = up? txtY-20 : txtY+20;
         ctx.fillStyle='#777';
         ctx.fillText;
      }
      //点击检测
      if{
          clickable.push;
      }
   });
   //④ 动画进度条
   if{
      const progX = w*progress;
      ctx.beginPath;
      ctx.moveTo;
      ctx.lineTo;
      ctx.strokeStyle='#e74c3c';
      ctx.lineWidth=5;
      ctx.stroke;
   }
}

*提示*: 上面代码里使用了全局变量isPlaying、progress、clickable, 为了保持示例简洁，这些变量会在初始化阶段统一声明。

AOP 思路：一次性在 canvas 上监听，内部遍历保存好的可点区域数组，Ru果坐标落入某圆，则调用对应回调。这样避免为每个节点单独注册监听器，大幅提升性Neng。

canvas.addEventListener('mouseup',e=>{
   const rect = canvas.getBoundingClientRect,
         mx=e.clientX-rect.left,
         my=e.clientY-rect.top;
   clickable.forEach(item=>{
       const dx=mx-item.x,
             dy=my-item.y;
       if<=item.radius){
           item.onClick;               // 执行用户自定义逻辑
           return false;                 // 跳出循环
       }
   });
});

The classic requestAnimationFrame pattern works like a charm:

let isPlaying=false,
    progress=0,
    speed=0.002;               // 每帧前进比例
function step{
   if return;
   progress+=speed;
   if{progress=1; isPlaying=false;}
   drawFlowChart;
   requestAnimationFrame;
}
// 按钮交互 -------------------------------------------------
document.getElementById.onclick==>{if{isPlaying=true;step;}};
document.getElementById.onclick==>{isPlaying=false;};
document.getElementById.onclick==>{progress=0;drawFlowChart;};

这套逻辑足以支撑「播放‑暂停‑回到起点」三种基本操作，你Ke以随时把速度调高或调低，只需改动s​peed​ .

Cavas 本身不随 CSS 自动拉伸，需要手动同步宽高。下面的 resize 函数兼顾了窗口缩放和设备像素比，保证高清显示：

function resize{
   const dpr = window.devicePixelRatio||1,
         rect = canvas.getBoundingClientRect;
   canvas.width = rect.width*dpr;
   canvas.height= rect.height*dpr;
   // 把坐标系放大 dpr 倍，后面绘制时不需要再除以 dpr。
   context.scale;
   drawFlowChart;
}
window.addEventListener;
resize;                     // 首次加载即调用

★#canvas.getContext            - 确保返回值非 null，否则说明浏览器不支持 Canvas。

★#ctx.isPointInPath  - 判断点击是否落在任意路径中，比手算距离geng可靠。

★#requestAnimationFrame - 与 setTimeout 相比，它Neng跟浏览器刷新频率同步，省电且geng流畅。

★#console.clear - 在开发阶段频繁打印坐标信息时用它保持 console 干净利落。

★#window.devicePixelRatio - 高分辨率屏幕上若出现模糊，请检查此值并相应放大 Canvas 实际像素大小。

★#HTML 注释保持干净 - 冗余注释会让源码阅读者失去耐心，尽量只保留关键说明即可。

准备 JSON 数据；

写一个负责清空‑绘制‑连线‑文本的通用函数；

把鼠标/键盘事件统一挂到 Canvas 上；

加入 requestAnimationFrame 实现播放动画。

Ru果你Yi经成功跑通上述代码，请给自己点个赞 🎉 ，并把这篇攻略分享给正在为「流程图」头疼的小伙伴们吧！祝编码顺利 🚀。

©2026 Canvas Event Flowchart Demo – All Rights Reserved. 返回顶部↑​​​​​​​​​​​​​​​​​​​​​​​ ​​​​​​​​​ ​​​​​​​ ​​​​​​​​​ ​​​​​​​​ ​ ​​​ ​​​​​​​‍‍‍‍‍‍‍‍‍‌‌‌‌‏‏‏‏‏‏‏‏‏‎‎‎‎‎‎‬‮‮‮‮‭‭‭⁠⁠⁠⁠⁠⁠‌‌‌‌‌‌‌‌ـــــــــــــ–​

&lt html lang =" zh - CN "&gt 
&lt head &gt 
&lt meta charset =" UTF -8 "&gt 
&lt meta name =" viewport " content =" width=device-width , initial-scale = 1 "&gt 
&lt title &gt Canvas Event Flowchart Demo &lt /title &gt 
&lt!-- 样式略 --&gt 
&lt /head &gt 
&lt body &gt 
&lt div class =" wrapper "&gt 
&#160&#160&#160&#160& lt header & gt ... &#160&#160&#160&#160& lt /header & gt 

&#160&#160&#160&#160& lt div class =" canvas - box "&gt 
&#160&#160&#160&#160&#160 &#60canvas id =" flowchartCanvas ">&lt /canvas&gt 
&#160&#160&#160 &#60 /div&gt 
...  
&lt script type =" module " & gt 
import {drawFlowChart , init , bindEvents } from "./flow.js"; /* 假设拆分 */ 
&lt /script&gt 
&lt /div&gt 
&lt footer&gt ...&lt /footer&gt
&lt /body&gt
&lt /html&gt


以上即为完整页面源码。将其保存为 index.html 后直接打开，即可kan到带有「播放／暂停／重置」按钮、支持点击弹窗的动态流程图。