2025年6月12日精选项目

Algorithm Visualizer

排序与图算法的分步动画可视化，Canvas 渲染，可单步调试每一步状态。

ReactTypeScriptCanvas

源码

这是什么

一个把抽象算法变「看得见」的小工具：排序的每一步交换、图搜索的每一次扩展，都用 Canvas 实时画出来，还能单步前进。

核心循环

stepper.ts

function step(state: AlgoState) {
  const op = state.operations[state.cursor];
  if (!op) return false;
  apply(op);              // 应用当前操作
  draw(state);            // 重绘
  state.cursor += 1;
  return true;            // 还有后续
}

操作日志在算法跑完后预生成，渲染层只负责回放，这样「暂停 / 单步 / 加速」互不干扰。

为什么做

学算法时，最大的障碍不是公式，而是看不到过程。把它画出来，递归的边界、交换的代价才变得直观。