当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript算法可视化入门教程

JavaScript算法可视化入门教程

2025-10-12 23:54:54 0浏览收藏

1. 确定可视化目标

先明确你要可视化的算法类型，比如排序算法（冒泡排序、快速排序）、搜索算法（二分查找）、图算法（Dijkstra、DFS）等。以冒泡排序为例：

目标：用柱状图表示数组元素，排序过程中高亮比较和交换的元素，并实时更新图形。

2. 搭建基本HTML结构

创建一个页面，包含画布和控制按钮：

3. 使用Canvas绘制数组状态

通过 Canvas 绘制柱状图表示数组。每个柱子的高度对应数值大小。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

let array = [];

function drawArray(arr, highlightIndices = []) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const barWidth = canvas.width / arr.length;
  arr.forEach((value, index) => {
    const color = highlightIndices.includes(index) ? 'red' : 'skyblue';
    ctx.fillStyle = color;
    ctx.fillRect(index * barWidth, canvas.height - value, barWidth - 2, value);
  });
}

4. 实现带延迟的排序逻辑

为了让用户看清每一步，需要用 async/await 和 setTimeout 控制执行节奏。

async function bubbleSort() {
  for (let i = 0; i     for (let j = 0; j       if (array[j] > array[j + 1]) {
        // 高亮比较的两个元素
        drawArray(array, [j, j + 1]);
        await sleep(100); // 延迟100ms

        // 交换
        [array[j], array[j + 1]] = [array[j + 1], array[j]];
      }
    }
  }
  // 排序完成，恢复默认颜色
  drawArray(array);
}

function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}