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制作排序算法演示动画的更多相关文章

  1. 使用vue实现排序算法演示动画

    缘起 最近做的一个小需求涉及到排序,界面如下所示: 因为项目是使用vue的,所以实现方式很简单,视图部分不用管,本质上就是操作数组,代码如下: { // 上移 moveUp (i) { // 把位置i ...

  2. JS写的排序算法演示

    看到网上有老外写的,就拿起自已之前完成的jmgraph画图组件也写了一个.想了解jmgraph的请移步:https://github.com/jiamao/jmgraph 当前演示请查看:http:/ ...

  3. 用HTML5实现的各种排序算法的动画比较 及算法小结

    用HTML5实现的各种排序算法的动画比较 http://www.webhek.com/misc/comparison-sort/ 几种排序算法效率的比较 来源:http://blog.chinauni ...

  4. 链表插入和删除，判断链表是否为空，求链表长度算法的，链表排序算法演示——C语言描述

    关于数据结构等的学习,以及学习算法的感想感悟,听了郝斌老师的数据结构课程,其中他也提到了学习数据结构的或者算法的一些个人见解,我觉的很好,对我的帮助也是很大,算法本就是令人头疼的问题,因为自己并没有学 ...

  5. 用HTML5实现的各种排序算法的动画比較

    用HTML5实现的各种排序算法的动画比較 非常有意思,详见: http://www.webhek.com/misc/comparison-sort/

  6. GDI+学习笔记（九）带插件的排序算法演示器（MFC中的GDI+实例）

    带插件的排序算法演示器 请尊重本人的工作成果,转载请留言.并说明转载地址,谢谢. 地址例如以下: http://blog.csdn.net/fukainankai/article/details/27 ...

  7. http://www.html5tricks.com/demo/jiaoben2255/index.html 排序算法jquery演示源代码

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

  8. 在Object-C中学习数据结构与算法之排序算法

    笔者在学习数据结构与算法时,尝试着将排序算法以动画的形式呈现出来更加方便理解记忆,本文配合Demo 在Object-C中学习数据结构与算法之排序算法阅读更佳. 目录 选择排序 冒泡排序 插入排序 快速 ...

  9. 用python编写排序算法

    交换排序 ＝＝＝ 冒泡排序,快速排序 插入排序 ＝＝＝直接插入排序,希尔排序 选择排序 ＝＝＝ 简单选择排序,堆排序 归并排序 基数排序 冒泡排序 要点 冒泡排序是一种交换排序. 什么是交换排序呢? ...

随机推荐

  1. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  2. Linux命令之用户与组管理

    介绍 Linux操作系统中,任何文件都归属某一特定的用户,而任何用户都隶属至少一个用户组.用户是否有权限对某文件进行访问.读写以及执行,受到系统严格约束的正式这种清晰.严谨的用户与用户组管理系统.在很 ...

  3. 使用VS Code开发AngularJS 2 第一个应用程序

    使用VS Code开发AngularJS 2 第一个应用程序 目录 运行环境 创建项目 安装依赖包 创建TypeScript应用程序 配置应用程序 运行应用程序 运行环境 运行环境: Windows ...

  4. （转）js学习笔记（）函数

    1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的个数则缺失的参数数会被自动赋予undefined值. 2.如果是用function语句声明的函数定义则不可以出现在循环 ...

  5. 模板模式（Template）

    行为型:Template(模板模式) 作为一个曾经爱好写文章,但是不太懂得写文章的人,我必须承认,开头是个比较难的起步. 模板模式常规定义:模板模式定义了一个算法步骤,把实现延迟到子类. 事实上模板模 ...

  6. 清北学堂 Pa

    PA[题目描述]汉诺塔升级了:现在我们有?个圆盘和?个柱子,每个圆盘大小都不一样,大的圆盘不能放在小的圆盘上面,?个柱子从左到右排成一排.每次你可以将一个柱子上的最上面的圆盘移动到右边或者左边的柱子上 ...

  7. LAMP 搭建wordpress部署教程贴.

    LAMP 搭建wordpress部署教程贴.这是一篇主要将LAMP,并且通过wordpress来进行验证,演示.如何去部署PHP CMS很多新手看到LAMP就很很头大,觉得很难搞,编译安装,搞了好几天 ...

  8. Selinux 禁用

    Selinux是对于强制访问控制的实现,在这种访问控制体系的限制下,进程只能访问那些在他的任务中所需要文件. 对于新手来说会影响我们的操作.一般情况下是不需要的,所以禁用他,如果需要的情况下,我们可以 ...

  9. hibernate像MySQL数据库里面存值是中文乱码的解决合辑

    解决办法一: 1.把数据库表每一行改成gb2312_chinese(使用PHPMyAdmin)   2.导入时候还是不行,因此查网上的资料说hibernate持久化层在传输过程中未设置编码格式,这样在 ...

  10. Python新手学习基础之运算符——位运算

    位运算符 位运算实际上是把数字看作二进制来进行计算,它的运算法则如下: 结合实例,来看下位运算是如何进行的吧: 位运算在实际应用中用途很广泛,比如我们经常听到的子网掩码,它其实就是和IP地址做了按位与 ...