使用canvas制作简易的数据结构核心算法演示系统——线性表(三)——头插法

最新推荐文章于 2022-07-08 16:34:29 发布

溪午不闻钟_

最新推荐文章于 2022-07-08 16:34:29 发布

阅读量233

点赞数 1

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

链表

链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点（链表中每一个元素称为结点）组成，结点可以在运行时动态生成。每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域。

单链表

单链表是一种链式存取的数据结构，用一组地址任意的存储单元存放线性表中的数据元素。每个结点的构成：元素(数据元素的映象) + 指针(指示后继元素存储位置)，元素就是存储数据的存储单元，指针就是连接每个结点的地址数据。

头插法

头插法是指，对于一个空的单链表，读入数据，形成新的结点，将新的结点插入头结点之后。

头插法核心代码

void create_head_node(Lnode *&C, int a[], int n)
{
	Lnode *s;
	int i;
	c=(Lnode*)malloc(sizeof(Lnode));
	c->next=NULL;
	for(i=0;i<n;i++)
	{
		s=(Lnode*)malloc(sizeof(Lnode));
		s->data=a[i];
		s->next=C->next;
		C->next=s;
}

理解了头插法核心代码后，便可以借助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);
        }
        #insertLNode{
            width:200px;
            margin-top: 10px;
            margin-left: 10px;
        }
        #headInsertLNode,#tailInsertLNode{
            margin-left: 10px;
        }
    </style>
</head>
<body>
<div class="alert alert-info" role="alert" style="text-align: center">
    注： 为确保演示效果，默认最多演示十个元素
</div>
<canvas id="canvas" width="900" height="600">

</canvas>
<input type="text" class="form-control" placeholder="请输入插入元素的值..." id="insertLNode">
<br>
<button type="button" id="headInsertLNode" class="btn btn-primary">头插法</button>
<button type="button" id="tailInsertLNode" 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，请更换浏览器稍后再试")
        }
        //drawLnodeItem(context,200,200,100,60,1,'#000','#fff','12',0);

        var LNode = [];
        //drawLnodeItem(context,40,400,80,40,1,"#444","#fff","head",1);
        LNode[0]="head";
        //创建image对象
        var img = new Image();


        //头插法
        $("#headInsertLNode").click(function () {
            //绘制图像
            img.src='../components/img/LNodeHead.png';
            img.onload = function(){
                context.drawImage(img,450-img.width/2,40);
                console.log(img.width);
            }


            var pattern = /^[a-z]+$/;

            if (LNode.length > 10){
                alert("表已满，不能再插入");
                $("#insertLNode").val("");
            } else if (pattern.exec($("#insertLNode").val()) == null || $("#insertLNode").val() == "") {
                //使用正则表达式判断输入的内容是否为大写字母
                alert("请输入正确的字母");
                $("#insertLNode").val("");
            }
            else {
                //绘制过渡动画
                //LNode=["dd","dee","efe"];

                var times=4;
                //设置定时器完成动画效果
                var clock = setInterval(function () {
                    context.clearRect(0,499,900,200);
                    drawLnodeItem(context,40,500,80,40,1,"#444","#fff",LNode[0],2);
                    context.save();
                   //绘制后边几个元素，隔开164像素的距离
                    context.translate(times,0);
                    for(var j=1;j<LNode.length;j++){
                        if(j === LNode.length - 1){
                            drawLnodeItem(context,204,500,80,40,1,"#444","#fff",LNode[j],1);
                        } else {
                            drawLnodeItem(context,204,500,80,40,1,"#444","#fff",LNode[j],0);
                        }
                        context.translate(164,0);
                    }
                    //绘制要加入的元素
                    context.restore();
                    context.clearRect(203,418+times/2-10,122,10);
                    drawLnodeItem(context,204,418+times/2,80,40,1,"#444","#FFFF00",$("#insertLNode").val(),2);
                    context.clearRect(203-40,418+times/2,40,82);
                    drawLineArrow(context,154,520,204,418+times/2+20);
                    if(LNode.length!=1){
                        context.clearRect(204,418+times/2+40,80,40);
                        drawLineArrow(context,154+164,418+times/2+20,164+40+times,520);

                    }

                    times+=10;
                    if (times >= 174){
                        clearInterval(clock);
                    }
                },100);

                //绘制最终结果
                setTimeout(function () {
                    console.log(LNode);
                    for(var i=LNode.length-1;i>0;i--){
                        LNode[i+1]=LNode[i];
                    }
                    LNode[1]=$("#insertLNode").val();
                    console.log($("#insertLNode").val());
                    //开始绘制，首先清空画布
                    context.clearRect(0,499,900,600);
                    //context.translate(40,0);
                    context.save();
                    context.translate(40,0);
                    drawLnodeItem(context,0,500,80,40,1,"#444","#fff",LNode[0],0);
                    for(var j=1;j<LNode.length;j++){
                        context.translate(164,0);
                        console.log(j);
                        if(j === LNode.length - 1){
                            drawLnodeItem(context,0,500,80,40,1,"#444","#fff",LNode[j],1);
                        } else {
                            drawLnodeItem(context,0,500,80,40,1,"#444","#fff",LNode[j],0);
                        }

                    }
                    context.restore();
                    $("#insertLNode").val("");
                },3000)
            }
        });
    };
</script>
</html>

溪午不闻钟_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用canvas制作简易的数据结构核心算法演示系统——线性表(三)——头插法

链表链表是一种物理存储单元上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中的指针链接次序实现的。链表由一系列结点（链表中每一个元素称为结点）组成，结点可以在运行时动态生成。每个结点包括两个部分：一个是存储数据元素的数据域，另一个是存储下一个结点地址的指针域。单链表单链表是一种链式存取的数据结构，用一组地址任意的存储单元存放线性表中的数据元素。每个结点的构成：元素(数据元素的映...
复制链接

扫一扫