动态可视化：用Canvas与requestAnimationFrame揭秘冒泡排序算法

前端

2024-01-23 13:33:19

一、认识冒泡排序算法

冒泡排序算法是一种简单的排序算法，因其形象的比喻而得名。它通过重复地比较相邻的元素，并交换那些不按顺序的元素，最终将整个数组排序。

1. 算法流程：

从数组的第一个元素开始，将其与相邻的第二个元素进行比较。
如果第一个元素大于第二个元素，则交换这两个元素的位置。
继续比较相邻的元素，并交换那些不按顺序的元素。
重复步骤2和步骤3，直到数组中的所有元素都按顺序排列。

2. 算法特点：

时间复杂度：O(n^2)，最坏情况和平均情况下的时间复杂度相同。
空间复杂度：O(1)，算法不使用额外的空间。
稳定性：冒泡排序算法是稳定的，即在排序后，如果两个元素的初始顺序相等，则排序后的顺序也相等。

二、在Canvas上可视化冒泡排序算法

借助Canvas和requestAnimationFrame，我们可以将冒泡排序算法的可视化演示出来。

1. 准备工作：

创建一个HTML文件和一个JavaScript文件。
在JavaScript文件中，导入requestAnimationFrame库。
在HTML文件中，创建Canvas元素。

2. 编写JavaScript代码：

// 创建Canvas上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 定义数组
const array = [5, 3, 8, 2, 1, 4, 7, 6];

// 定义颜色
const colors = ["#ff0000", "#ff8000", "#ffff00", "#80ff00", "#00ff00", "#00ff80", "#00ffff", "#0080ff"];

// 定义正在比较的元素的索引
let i = 0;
let j = 1;

// 定义是否正在交换元素的标志
let isSwapping = false;

// 定义排序是否完成的标志
let isSorted = false;

// 定义动画帧ID
let requestId = null;

// 循环播放动画
function animate() {
  // 清除Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制数组元素
  for (let i = 0; i < array.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.fillRect(i * 50, 0, 50, array[i] * 50);
  }

  // 比较相邻元素
  if (!isSwapping && !isSorted) {
    if (array[i] > array[j]) {
      isSwapping = true;
    } else {
      i++;
      j++;
    }

    if (j === array.length) {
      j = 0;
      i = 0;
      isSorted = true;
    }
  }

  // 交换元素
  if (isSwapping) {
    let temp = array[i];
    array[i] = array[j];
    array[j] = temp;
    isSwapping = false;
  }

  // 检查是否排序完成
  if (isSorted) {
    cancelAnimationFrame(requestId);
    return;
  }

  // 请求下一次动画帧
  requestId = requestAnimationFrame(animate);
}

// 启动动画
animate();