JavaScript实现冒泡排序 可视化
说明
上次写了 JavaScript实现冒泡排序 ，只是简单的说了冒泡排序算法是什么，怎么实现，此次来实现将冒泡排序的过程展示出来。html
解释
先来个简单的版本，看效果图 
前端
实现这个效果，思路是这样的
一、先将须要排序的数组，进行冒泡排序，记录每一步的内容，存放在一个数组中
二、利用canvas，实现一个 darw 方法，能将一步的内容画到页面上
三、实现动画效果，利用定时器，每隔一段时间，调用 darw 方法，画出一步到页面上 vue
实现这个效果仍是须要会一点点canvas的，好比知道怎么画个长方形，怎么写几个字，换个颜色，若是不会的话，请到这里去看看。算法
代码vuex
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#main {
width: 600px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div id="main">
<canvas id="myCanvas" width="600" height="200"> </canvas>
</div>
<script>
function bubbleSort(arr) {
// 冒泡排序算法，对数组进行排序，同时记录每一步操做，保存在一个数组中
function sort() {
// virtualArr 用来存放 每个步内容的数组
var virtualArr = [arr.slice()];
var max = arr.length;
for (var i = 0; i < max; i++) {
var done = true;
for (var j = 0; j < max - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
done = false;
virtualArr.push(arr.slice());
}
};
if(done){
break;
};
}
return virtualArr;
}
// 绘画，调用一次就画出一步的图像
function darw(arr){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 获取 canvas画板的高度(肯定每一个长方形的 y 值时须要)
var maxWidth = canvas.height;
// 每一个长方形的宽度
var width = 20;
// 每一个长方形之间的间隔
var space =20;
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 设置字体
ctx.font = "18px serif";
// 在页面上，画出一步的内容
for (var i = 0; i < arr.length; i++) {
ctx.fillStyle = '#61C5FE';
// x 的 值等于 第i个长方形 * （长方形的宽+每一个长方形的间隔）
// y 的 值等于 画板的高度 - 第i的元素的值
ctx.fillRect(i * (width+space), maxWidth - arr[i], width, arr[i]);
ctx.fillStyle = '#240be4';
// maxWidth - arr[i]-5，这里多- 5，是为了能让文字，在长方形上方一点显示，看的明显些
ctx.fillText(arr[i], i * (width+space), maxWidth - arr[i]-5);
}
}
// 动画
function animation() {
// 调用sort 方法，返回包括每一步内容的数组
var virtualArr = sort();
var interval =500;
// 遍历获得的数组，每隔500ms，调用darw 方法，画出一步内容
virtualArr.forEach((item, index) => {
setTimeout(() => darw(item), index * interval);
});
}
animation();
}
var arr = [50,40,20,10,10];
bubbleSort(arr);
</script>
</body>
</html>
看上面的代码，能看出，实现效果主要靠的是三个函数
一、sort，实现冒泡排序，返回包括每一步的数组
二、darw ，画出一步的内容
三、animation ，实现动画效果，定时调用darw 方法canvas
上面实现的是比较简单的一版，下来看一版更加漂亮的，这是我在Codepen上找到的，改了些代码后，是这样了，看图 
segmentfault
这一版比上一版要好看不少，可是思路其实同样，都是须要一个包含每一步内容的数组，遍历数组，定时执行操做，实现动画效果。不一样的地方就在于，这一版把每一步分的更细了，每一步都有不一样的类型。数组
这一版是使用vue作的，在vuex中的mutations定义了 6个方法 来实现效果
一、reset，重置，
二、swap，交换，实现图中两个绿色div，进行位移，
三、activate，激活，实现图中两个红色div，变成绿色，
四、deactivate，释放，实现图中两个绿色div，恢复成红色，
五、lock，锁定，实现找到一个最大值后，将它变成蓝色，
六、done，完成，返回 true 表示排序完成。
点这里下载代码 ，代码里加了很详细的注释，很是容易看懂。函数
总结
上面的两个版本的思路基本同样，用一句话归纳就是，记录冒泡排序全部的改变，将这些改变一步一步的显示出来。字体
