javascript
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实现冒泡排序 可视化的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sudo命令 和限制root 远程登陆
- 下一篇： Exp3 免杀原理与实践 2015432