如何用可视化方式呈现冒泡排序

前端

2023-12-16 11:56:10

冒泡排序的可视化实现

冒泡排序是一种简单易懂的排序算法，它通过一遍一遍地比较相邻元素并交换它们的位置，最终将数组中的元素从小到大排序。

可视化实现思路

为了将冒泡排序的可视化，我们可以使用前端技术，如JavaScript和HTML5 Canvas。具体思路如下：

创建一个Canvas元素，并在其中绘制一个矩形阵列，每个矩形代表数组中的一个元素。
初始化数组并随机填充元素。
使用JavaScript实现冒泡排序算法。
在每次比较和交换操作后，重新绘制Canvas，以可视化排序过程。

实现步骤

创建Canvas和矩形阵列

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const numCols = 10;
const numRows = 10;
const rectWidth = canvas.width / numCols;
const rectHeight = canvas.height / numRows;

初始化数组并填充元素

const array = [];
for (let i = 0; i < numCols * numRows; i++) {
  array[i] = Math.random() * 100;
}

实现冒泡排序算法

const bubbleSort = (array) => {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length - i - 1; j++) {
      if (array[j] > array[j + 1]) {
        // 交换元素
        const temp = array[j];
        array[j] = array[j + 1];
        array[j + 1] = temp;
        // 重新绘制Canvas
        drawArray(array);
      }
    }
  }
};

绘制数组

const drawArray = (array) => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < array.length; i++) {
    const x = i % numCols * rectWidth;
    const y = Math.floor(i / numCols) * rectHeight;
    const height = array[i] / 100 * rectHeight;
    ctx.fillStyle = `hsl(${array[i] / 100 * 360}, 100%, 50%)`;
    ctx.fillRect(x, y, rectWidth, height);
  }
};