當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Canvas制作排序算法演示动画

發(fā)布時間：2023/12/10 编程问答 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Canvas制作排序算法演示动画小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

tips: 形象化演示排序算法可以讓初學(xué)者快速理解，比較好的例子：jun-lu的SortAnimate，舊金山大學(xué)的David Galles教授的算法演示課件。最近在看canvas，試著用js+canvas自己做了一個。

實現(xiàn)思路

獲取輸入字符串
存入數(shù)組S[]中
新建一個對象數(shù)組Rect[]{ x , y , target_x , target_y , text:S[i]}（注：x , y 是當(dāng)前坐標(biāo)，target_x , target_y 是目的坐標(biāo)，text 記錄字符）
排序
使用插入排序進行順序排序，當(dāng)數(shù)值有交換行為時，用track_insert[]記錄進行交換的元素在數(shù)組中的位置（方便在繪制動畫時進行坐標(biāo)定位）
因為我用的是插入排序，屬于arr[i]和arr[i+1]進行交換，所以只需要記錄i就可以。
繪制
圖片繪制function Draw(){}
圖片坐標(biāo)更新function Update(){}
使用setInterval()定時調(diào)用Draw()和Update()函數(shù)進行頁面刷新

效果

小結(jié)

做動畫都是一個原理，不短刷新更新坐標(biāo)，擦除，繪制，之前用opencv做的2d的小游戲也是同樣的原理。

Source code

.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link rel="stylesheet" type="text/css" href="css/demo.css"/><script type="text/javascript"src="js/demo2.js"></script><title>Demo</title> </head> <body> <div id="container"><div><p>Input String：<input name="string" id="tin" type="text"/></p> </div><div><p> <input type="button" onclick="showDemo()"id="bin" value="Show"/></p><canvas id="mycanvas" ></canvas></div></div> </body> </html>

.js

var S; var Coordinate_y = 40; var Rect = new Array(); var track_insert = new Array(); var cons = 0; var cnt;function func() { //獲取字符串，存入數(shù)組S = document.getElementsByName("string")[0].value.split(""); //依據(jù)數(shù)組元素，完成對象數(shù)組for (var i = 0; i < S.length; i++) {var rect = {x: 30 * i,y: Coordinate_y,target_x: 30 * i,target_y: Coordinate_y,text: S[i]}Rect.push(rect);}insertSort(S); }function insertSort(arr) {var i = 1,j, key, temp;for (; i < arr.length; i++) {j = i;key = arr[i];while (--j >= 0) {if (arr[j] > key) {arr[j + 1] = arr[j];arr[j] = key; //當(dāng)數(shù)據(jù)有交換時，記錄下標(biāo)track_insert.push(j);} else {break;}}} } //坐標(biāo)更新 function update() {if (cons > track_insert.length) {return;}if (cons == 0) {cnt = track_insert[cons];Rect[cnt].target_x = Rect[cnt + 1].x;Rect[cnt + 1].target_x = Rect[cnt].x;cons += 1;console.log(cnt);}if (Rect[cnt].x == Rect[cnt].target_x) {if (cons == track_insert.length) {cons += 1;return;}var tem = Rect[cnt];Rect[cnt] = Rect[cnt + 1];Rect[cnt + 1] = tem;cnt = track_insert[cons];Rect[cnt].target_x = Rect[cnt + 1].x;Rect[cnt + 1].target_x = Rect[cnt].x;cons += 1;console.log(cnt);} else {Rect[cnt].x += 1;Rect[cnt + 1].x -= 1;} } //繪制圖像 function draw(context) {context.clearRect(0, 0, context.canvas.width, context.canvas.height);for (var i = 0; i < Rect.length; i++) {if ((Rect[i].x - Rect[i].target_x) >= 2 || (Rect[i].x - Rect[i].target_x) < -2) {context.fillStyle = "yellow";context.fillRect(Rect[i].x, Rect[i].y, 25, 25);context.fillStyle = "blue";context.fillText(Rect[i].text, Rect[i].x + 10, Rect[i].y + 15);} else {context.strokeStyle = "blue";context.strokeRect(Rect[i].x, Rect[i].y, 25, 25);context.fillStyle = "blue";context.fillText(Rect[i].text, Rect[i].x + 10, Rect[i].y + 15);}}context.fillText("插入排序", 40, 80); } function showDemo() {func();var c = document.getElementById("mycanvas");c.width = 600;c.height = 300;var context = c.getContext("2d"); //40ms調(diào)用一次函數(shù)setInterval(function() {draw(context);update();}, 40); }

.css

input#tin{margin-bottom: 5px;background-color: #fff;opacity:0.85;8width:20px;height:25px; border-width: 1;font-size: 17px; color: #000; font-weight: 500; border-radius: 5px;cursor:pointer; } input#bin{background-color: gray;width:80; height:25; border-width: 2; font-size: 20px; color: #FFFFFF; font-weight: 500;cursor:pointer; border-radius: 5px; } canvas#mycanvas{border:1px solid;width: 600px;height: 300px;margin-top: 5px;border-radius: 5px; } div#container{margin-left: 70px; }

轉(zhuǎn)載于:https://www.cnblogs.com/coderleon/p/4784095.html

總結(jié)

以上是生活随笔為你收集整理的Canvas制作排序算法演示动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。