Canvas制作排序算法演示动画
Tips: 形象化演示排序算法可以让初学者快速理解,比较好的例子:jun-lu的SortAnimate,旧金山大学的David Galles教授的算法演示课件。最近在看canvas,试着用js+canvas自己做了一个。
实现思路
- 获取输入字符串
- 存入数组
S[]
中 - 新建一个对象数组
Rect[]{ x , y , target_x , target_y , text:S[i]}
(注:x , y
是当前坐标,target_x , target_y
是目的坐标,text
记录字符)
- 存入数组
- 排序
- 使用插入排序进行顺序排序,当数值有交换行为时, 用
track_insert[]
记录进行交换的元素在数组中的位置(方便在绘制动画时进行坐标定位) - 因为我用的是插入排序,属于
arr[i]
和arr[i+1]
进行交换,所以只需要记录i
就可以。
- 使用插入排序进行顺序排序,当数值有交换行为时, 用
- 绘制
- 图片绘制
function Draw(){}
- 图片坐标更新
function Update(){}
- 使用
setInterval()
定时调用Draw()
和Update()
函数进行页面刷新
- 图片绘制
效果
小结
做动画都是一个原理,不短刷新更新坐标,擦除,绘制,之前用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>
<