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. Find命令简介

    Find命令主要用于目标的搜索,尽量做到少使用,因为find会消耗大量的系统资源. 使用该命令时,需要避开服务器运行高峰期,最好在指定的小范围内进行搜索,不要轻易使用全盘搜索. Find命令常用的参数 ...

  2. jquery之遍历展示title

    //遍历展示title {field:'couponsList',title:'优惠劵类型',width:250,align:'center',sortable:true, formatter:fun ...

  3. LayoutInflater 原理分析 示例

    LayoutInflater简介        LayoutInflater 顾名思义就是布局填充器,做过Android界面编程,相信对这个类都比较熟悉,可能有人说,我们在activity中使用set ...

  4. 重学《C#高级编程》（继承）

    前两天重新看了<C#高级编程>里的第四章:继承与第六章:数组.OOP三大特性:封装,继承,多态,个人感觉继承是实现多态的基础,包括以后接触的设计模式,都是继承特性的衍生. 继承特性有两种, ...

  5. WPF 获取屏幕分辨率（获取最大宽高）等

    double x = SystemParameters.WorkArea.Width;//得到屏幕工作区域宽度 double y = SystemParameters.WorkArea.Height; ...

  6. C#获取当前路径的几种方法

    C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...

  7. Android(性能)

    ■ 数据传输 对象和字节流之间的转换 为什么要转? 持久化(装逼说法,JVM非运行的场合),他进程(装逼说法,其他机器JVM,不同的JVM) Parcelable和Serializable 初衷: P ...

  8. 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. ...

  9. itext poi 学习之旅 （3）读取数据库信息并由excel展现出来

    DBConnection.java 连接数据库操作 package com.zkbj.poi; import java.sql.Connection; import java.sql.DriverMa ...

  10. 在TCP协议下的数据传送

    本人小白菜逼一枚,,,,刚建立博客,也写不了太深入的,就写点上课的笔记什么的.有错误希望广大博友指出,我一定虚心学习接收改正. 我的新浪邮箱:liudaohui0805@sina.com 我的QQ邮箱 ...