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>
<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() {
//获取字符串,存入数组
S = document.getElementsByName("string")[0].value.split("");
//依据数组元素,完成对象数组
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;
//当数据有交换时,记录下标
track_insert.push(j);
} else {
break;
}
}
}
}
//坐标更新
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调用一次函数
setInterval(function() {
draw(context);
update();
}, 40);
}
.css
input#tin{
margin-bottom: 5px;
background-color: #fff;opacity:0.85;8
width: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;
}
Canvas制作排序算法演示动画的更多相关文章
- 使用vue实现排序算法演示动画
缘起 最近做的一个小需求涉及到排序,界面如下所示: 因为项目是使用vue的,所以实现方式很简单,视图部分不用管,本质上就是操作数组,代码如下: { // 上移 moveUp (i) { // 把位置i ...
- JS写的排序算法演示
看到网上有老外写的,就拿起自已之前完成的jmgraph画图组件也写了一个.想了解jmgraph的请移步:https://github.com/jiamao/jmgraph 当前演示请查看:http:/ ...
- 用HTML5实现的各种排序算法的动画比较 及算法小结
用HTML5实现的各种排序算法的动画比较 http://www.webhek.com/misc/comparison-sort/ 几种排序算法效率的比较 来源:http://blog.chinauni ...
- 链表插入和删除,判断链表是否为空,求链表长度算法的,链表排序算法演示——C语言描述
关于数据结构等的学习,以及学习算法的感想感悟,听了郝斌老师的数据结构课程,其中他也提到了学习数据结构的或者算法的一些个人见解,我觉的很好,对我的帮助也是很大,算法本就是令人头疼的问题,因为自己并没有学 ...
- 用HTML5实现的各种排序算法的动画比較
用HTML5实现的各种排序算法的动画比較 非常有意思,详见: http://www.webhek.com/misc/comparison-sort/
- GDI+学习笔记(九)带插件的排序算法演示器(MFC中的GDI+实例)
带插件的排序算法演示器 请尊重本人的工作成果,转载请留言.并说明转载地址,谢谢. 地址例如以下: http://blog.csdn.net/fukainankai/article/details/27 ...
- http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- 在Object-C中学习数据结构与算法之排序算法
笔者在学习数据结构与算法时,尝试着将排序算法以动画的形式呈现出来更加方便理解记忆,本文配合Demo 在Object-C中学习数据结构与算法之排序算法阅读更佳. 目录 选择排序 冒泡排序 插入排序 快速 ...
- 用python编写排序算法
交换排序 === 冒泡排序,快速排序 插入排序 ===直接插入排序,希尔排序 选择排序 === 简单选择排序,堆排序 归并排序 基数排序 冒泡排序 要点 冒泡排序是一种交换排序. 什么是交换排序呢? ...
随机推荐
- Find命令简介
Find命令主要用于目标的搜索,尽量做到少使用,因为find会消耗大量的系统资源. 使用该命令时,需要避开服务器运行高峰期,最好在指定的小范围内进行搜索,不要轻易使用全盘搜索. Find命令常用的参数 ...
- jquery之遍历展示title
//遍历展示title {field:'couponsList',title:'优惠劵类型',width:250,align:'center',sortable:true, formatter:fun ...
- LayoutInflater 原理分析 示例
LayoutInflater简介 LayoutInflater 顾名思义就是布局填充器,做过Android界面编程,相信对这个类都比较熟悉,可能有人说,我们在activity中使用set ...
- 重学《C#高级编程》(继承)
前两天重新看了<C#高级编程>里的第四章:继承与第六章:数组.OOP三大特性:封装,继承,多态,个人感觉继承是实现多态的基础,包括以后接触的设计模式,都是继承特性的衍生. 继承特性有两种, ...
- WPF 获取屏幕分辨率(获取最大宽高)等
double x = SystemParameters.WorkArea.Width;//得到屏幕工作区域宽度 double y = SystemParameters.WorkArea.Height; ...
- C#获取当前路径的几种方法
C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...
- Android(性能)
■ 数据传输 对象和字节流之间的转换 为什么要转? 持久化(装逼说法,JVM非运行的场合),他进程(装逼说法,其他机器JVM,不同的JVM) Parcelable和Serializable 初衷: P ...
- The type or namespace name 'Script' does not exist in the namespace 'System.Web' (are you missing an assembly reference?)
应该说是 .net4 的bug,没有所谓的 System.Web.Extensions.dll 库文件,需要将项目的 Target Framework修改为 3.5版本,才能加载System.Web. ...
- itext poi 学习之旅 (3)读取数据库信息并由excel展现出来
DBConnection.java 连接数据库操作 package com.zkbj.poi; import java.sql.Connection; import java.sql.DriverMa ...
- 在TCP协议下的数据传送
本人小白菜逼一枚,,,,刚建立博客,也写不了太深入的,就写点上课的笔记什么的.有错误希望广大博友指出,我一定虚心学习接收改正. 我的新浪邮箱:liudaohui0805@sina.com 我的QQ邮箱 ...