JavaScript实现冒泡排序可视化

说明

上次写了 JavaScript实现冒泡排序，只是简单的说了冒泡排序算法是什么，怎么实现，这次来实现将冒泡排序的过程展现出来。

解释

先来个简单的版本，看效果图

实现这个效果，思路是这样的
1、先将需要排序的数组，进行冒泡排序，记录每一步的内容，存放在一个数组中
2、利用canvas，实现一个 darw 方法，能将一步的内容画到页面上
3、实现动画效果，利用定时器，每隔一段时间，调用 darw 方法，画出一步到页面上

实现这个效果还是需要会一点点canvas的，比如知道怎么画个长方形，怎么写几个字，换个颜色，如果不会的话，请到这里去看看。

代码

<!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>

看上面的代码，能看出，实现效果主要靠的是三个函数
1、sort，实现冒泡排序，返回包括每一步的数组
2、darw ，画出一步的内容
3、animation ，实现动画效果，定时调用darw 方法

上面实现的是比较简单的一版，下来看一版更加漂亮的，这是我在Codepen上找到的，改了些代码后，是这样了，看图

这一版比上一版要好看很多，但是思路其实一样，都是需要一个包含每一步内容的数组，遍历数组，定时执行操作，实现动画效果。不同的地方就在于，这一版把每一步分的更细了，每一步都有不同的类型。

这一版是使用vue做的，在vuex中的mutations定义了 6个方法来实现效果
1、reset，重置，
2、swap，交换，实现图中两个绿色div，进行位移，
3、activate，激活，实现图中两个红色div，变成绿色，
4、deactivate，释放，实现图中两个绿色div，恢复成红色，
5、lock，锁定，实现找到一个最大值后，将它变成蓝色，
6、done，完成，返回 true 表示排序完成。
点这里下载代码，代码里加了很详细的注释，非常容易看懂。

总结

上面的两个版本的思路基本一样，用一句话概括就是，记录冒泡排序所有的改变，将这些改变一步一步的显示出来。

JavaScript实现冒泡排序可视化相关推荐

JavaScript实现冒泡排序可视化 1
说明上次写了 JavaScript实现冒泡排序 ,只是简单的说了冒泡排序算法是什么,怎么实现,这次来实现将冒泡排序的过程展现出来. 解释先来个简单的版本,看效果图实现这个效果,思路是这样的 1. ...
JavaScript实现冒泡排序
说明对数组进行冒泡排序算是比较简单的,冒泡排序也是容易理解的一种排序算法了,在面试的时候,很可能就会问到. 实现原理数组中有 n 个数,比较每相邻两个数,如果前者大于后者,就把两个数交换位置: ...
JavaScript实现冒泡排序 1
说明对数组进行冒泡排序算是比较简单的,冒泡排序也是容易理解的一种排序算法了,在面试的时候,很可能就会问到. 实现原理数组中有 n 个数,比较每相邻两个数,如果前者大于后者,就把两个数交换位置: ...
python冒泡排序_5种python方法实现冒泡排序可视化：Bubble Sort Visualizer
1 说明: ===== 1.1 冒泡排序: 1.1.1 原理:比较两个相邻的元素,将值大的元素交换至右端. 1.1.2 来源:由来是因为越大的元素会经由交换慢慢"浮"到数列的顶端, ...
JavaScript算法——冒泡排序
一.概念冒泡排序(Bubble Sort)也叫气泡排序.泡沫排序,是一种比较简单的排序算法. 它通过遍历数组,比较相邻的两个元素,如果前一个元素比后一个元素大,则交换它们的位置,这样第一次遍历后数组 ...
使用python和javascript进行数据可视化
Any data science or data analytics project can be generally described with the following steps: 通常可以 ...
推荐14款基于javascript的数据可视化工具
2019独角兽企业重金招聘Python工程师标准>>> 随着数据可视化概念逐年火热,有较多优秀的图表开源库和制作工具脱颖而出,下面,我们就拿其中比较有名的 14个产品进行简要介绍. ...
7个使用JavaScript构建数据可视化的实用工具库，希望你能喜欢
JavaScript运行网络.您可以在浏览器中使用它,也可以在服务器上使用它,并且可以将其用于移动应用程序. 当今的生态系统充满了强大的库和框架,可帮助工程师为任何平台构建功能强大,以用户为中心的应用 ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...

JavaScript实现冒泡排序可视化

说明

解释

总结

JavaScript实现冒泡排序可视化相关推荐

最新文章

热门文章

JavaScript实现冒泡排序 可视化

说明

解释

总结

JavaScript实现冒泡排序 可视化相关推荐

最新文章

热门文章

JavaScript实现冒泡排序可视化

JavaScript实现冒泡排序可视化相关推荐