使用canvas制作简易的数据结构核心算法演示系统——排序(一)——直接插入排序

最新推荐文章于 2022-06-09 12:40:17 发布

溪午不闻钟_

最新推荐文章于 2022-06-09 12:40:17 发布

阅读量198

点赞数

分类专栏：前端文章标签： html5 html javascript css

本文链接：https://blog.csdn.net/bruce_zhao1407/article/details/105428331

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

排序

排序是计算机内经常进行的一种操作，其目的是将一组“无序”的记录序列调整为“有序”的记录序列。分内部排序和外部排序，若整个排序过程不需要访问外存便能完成，则称此类排序问题为内部排序。反之，若参加排序的记录数量很大，整个序列的排序过程不可能在内存中完成，则称此类排序问题为外部排序。内部排序的过程是一个逐步扩大记录的有序序列长度的过程。

直接插入排序

直接插入排序（Straight Insertion Sort）是一种最简单的排序方法，其基本操作是将一条记录插入到已排好的有序表中，从而得到一个新的、记录数量增1的有序表。

直接插入排序核心代码

void insertSort(int R[],int n)
{
	int i,j,temp;
	for(i=1;i<n;i++)
	{
		temp=R[i];
		j=i-1;
		while(j>=0&&temp<R[j])
		{
			R[j+1]=R[j];
			--j;
		}
		R[j+1]=temp;
	}
}

了解了直接插入排序的核心代码后，便可以借助canvas绘制出一个简易的直接插入排序的操作演示系统，以下是代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../components/bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <style>
        body{
            position: relative;
        }
        #canvas {
            position: absolute;
            border: 1px solid #ccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
        #operateInsert{
            width:200px;
            margin-top: 10px;
            margin-left: 10px;
        }
        #insert,#sort{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="alert alert-info" role="alert" style="text-align: center">
    注： 为确保演示效果，默认最多演示十个元素
</div>
<canvas id="canvas" width="1000" height="500">

</canvas>

<input type="text" class="form-control" placeholder="请输入插入元素的值..." id="operateInsert">
<br>
<button type="button" id="insert" class="btn btn-primary">插入</button>
<button type="button" id="sort" class="btn btn-primary">排序</button>
<br><br>

</body>
<script src="../components/js/jquery.min.js"></script>
<script src="../components/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
<script src="../components/js/draw.js"></script>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        //判断浏览器是否支持canvas
        if (canvas.getContext("2d")) {
            var context = canvas.getContext("2d");
        } else {
            alert("当前浏览器不支持canvas，请更换浏览器稍后再试")
        }
        var img = new Image();
        var array = [];
        var times=0;
        drawInsertSort(context,array,-1);

        //插入操作
        $("#insert").click(function () {
            var pattern = /^(-)?\d+(\.\d+)?$/;
            if(array.length>=10){
                alert("警告：为保证演示质量，默认最多添加10个元素");
            } else if (pattern.exec($("#operateInsert").val()) == null||$("#operateInsert").val()==""){
                alert("请输入正确的数字");
            } else {
                array[array.length]=$("#operateInsert").val();
                drawInsertSort(context,array,0,times,false);
                //将数组中字符类型转换为数字类型
                for(var i=0;i<array.length;i++){
                    array[i]=parseInt(array[i]);
                }
                $("#operateInsert").val("");
            }
        });

        //排序操作
        $("#sort").click(function () {
            var i,j,temp;
            i=1;
            for(i=1;i<array.length;i++){
          		temp=array[i];
           		j=i-1;
          	while(j>=0&&temp<array[j]){
           		array[j+1]=array[j];
        		j--;
          	}
          	array[j+1]=temp;
          	drawInsertSort(context,array,j+1,++times,true);
          }
        })
    };


</script>
</html>