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

顺序表

顺序表是在计算机内存中以数组的形式保存的线性表，线性表的顺序存储是指用一组地址连续的存储单元依次存储线性表中的各个元素、使得线性表中在逻辑结构上相邻的数据元素存储在相邻的物理存储单元中，即通过数据元素物理存储的相邻关系来反映数据元素之间逻辑上的相邻关系，采用顺序存储结构的线性表通常称为顺序表。顺序表是将表中的结点依次存放在计算机内存中一组地址连续的存储单元中。

顺序表的插入

对于顺序表，在进行插入之前，首先需要找到待插入的位置，以递增有序的顺序表为例

	function SqlistInFind(a, x) {
        for (var i = 0; i < a.length; i++){
            if (x < a[i]){
                return i;
            }
        }
        return i;
    }

如上所示，查找插入位置时，按顺序遍历顺序表内所有元素，若找到大于待插入元素的元素，则返回当前位置，否则返回顺序表长度，即插入到最最后。

找到待插入位置之后，即调用进行插入操作的函数

	function SqlistInsert(a, p, x) {
        for (var i = a.length - 1; i >= p; i--) {
            a[i + 1] = a[i];
        }
        a[p] = x;
        return a;
    }

如上所示，p为待插入位置，插入函数将a[p]及其之后的所有元素后移一位，将待插入元素放在a[p]上。

在明确了上述两个核心函数之后，便可以很轻易地做出建议的插入操作演示系统

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            position: relative;
        }
        #canvas {
            position: absolute;
            border: 1px solid #ccc;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
    <script src="../components/js/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas" width="900" height="600">

</canvas>
<input type="text" placeholder="请输入插入元素的值..." id="insertIuput">
<input type="button" id="insertButton" value="插入">
<br><br>
<br><br>
<p>注： 为确保演示效果，</p>
<p>默认最多十个元素</p>
</body>
<script>
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        //判断浏览器是否支持canvas
        if (canvas.getContext("2d")) {
            var context = canvas.getContext("2d");
        } else {
            alert("当前浏览器不支持canvas，请更换浏览器稍后再试")
        }

        var index = 0;
        var Sqlist = [];


        $("#insertButton").click(function () {
            var pattern = /^(-)?\d+(\.\d+)?$/;

            if (Sqlist.length > 10){
                alert("表已满，不能再插入");
            } else if (pattern.exec($("#insertIuput").val()) == null || $("#insertIuput").val() == "") {
                //使用正则表达式判断输入的内容是否为数字
                alert("请输入正确的数字")
            } else if( Sqlist.length == 0){
                //输入第一个数
                // console.log($("#insertIuput").val());
                // console.log(typeof $("#insertIuput").val());
                Sqlist[0] = parseInt($("#insertIuput").val());
                context.save();
                context.translate(62 * Sqlist.length,0);
                drawSqlist(context,Sqlist[0],"#FFFFFF");
                context.restore();
                //清空输入框
                $("#insertIuput").val("");
            }
            else {
                //寻找要插入的位置
                var position = SqlistInFind(Sqlist,parseInt($("#insertIuput").val()));
                console.log(position);
                //插入到指定位置
                Sqlist = SqlistInsert(Sqlist,position,parseInt($("#insertIuput").val()));
                console.log(Sqlist);
                //清空输入框
                $("#insertIuput").val("");

                //绘制操作
                //清空画布
                context.clearRect(0,0,900,600);
                //依次绘制
                for (var i = 0; i < Sqlist.length; i++){
                    context.save();
                    context.translate(62 * (i + 1),0);
                    if (i === position){
                        drawSqlist(context,Sqlist[i], "#FFFF00");
                    } else {
                        drawSqlist(context,Sqlist[i], "#FFFFFF");
                    }
                    context.restore();
                }
            }
        })
    };

    //绘制顺序表的函数
    function drawSqlist(cxt, value, fillColor){
        drawRect(cxt, 40, 400, 60, 30, 1, '#000',fillColor, value);
    }

    //绘制矩形的函数
    function drawRect(cxt,x,y, width, height,borderWidth, borderColor, fillColor, content ){
        cxt.beginPath();
        //rect函数直接创建矩形
        cxt.rect(x,y, width, height);
        cxt.lineWidth = borderWidth;
        cxt.fillStyle = fillColor;
        cxt.strokeStyle = borderColor;

        cxt.fill();
        cxt.stroke();
        cxt.closePath();

        //绘制矩形的内容
        cxt.beginPath();
        cxt.font = "bold 20px Arial";
        ///实心
        cxt.fillStyle = "#000";
        cxt.fillText(content, x + 7, y +20);
        cxt.beginPath();

    }

    //顺序表查找的函数
    function SqlistInFind(a, x) {
        for (var i = 0; i < a.length; i++){
            if (x < a[i]){
                return i;
            }
        }
        return i;
    }
    //顺序表插入的函数
    function SqlistInsert(a, p, x) {
        for (var i = a.length - 1; i >= p; i--) {
            a[i + 1] = a[i];
        }
        a[p] = x;
        return a;
    }



</script>
</html>

注意，以上代码是使用input获取用户输入的待插入元素，此时应注意将字符串类型转换为数字类型，转换方法详见点击跳转

来源：CSDN

作者：溪午不闻钟_

链接：https://blog.csdn.net/bruce_zhao1407/article/details/104490919

标签

顺序表

数据结构

canvas