使用canvas制作简易的数据结构核心算法演示系统——栈与队列(一)——栈的操作

最新推荐文章于 2021-06-08 10:02:24 发布

溪午不闻钟_

最新推荐文章于 2021-06-08 10:02:24 发布

阅读量266

点赞数

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

栈

栈（stack）又名堆栈，它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶，相对地，把另一端称为栈底。
栈具有先进后出（FILO）的特点

入栈和出栈

向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，使其相邻的元素成为新的栈顶元素。

入栈和出栈核心代码

入栈

int push(SqStack &st, int &x)
{
    if(st.top==maxSize-1)
        return 0;
    ++(st.top);
    st.data[st.top]=x;
    return 1;
}

出栈

int pop(SqStack &st, int &x)
{
    if(st.top==-1)
        return 0;
    x=st.data[st.top];
    --(st.top);
    return 1;
}

了解了入栈出栈核心代码后，便可以借助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);
        }
        #operateStack{
            width:200px;
            margin-top: 10px;
            margin-left: 10px;
        }
        #inStack,#outStack{
            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="operateStack">
<br>
<button type="button" id="inStack" class="btn btn-primary">入栈</button>
<button type="button" id="outStack" 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 stack = [];
        //绘制栈的结构
        drawStackFinal(context,stack);

        $("#inStack").click(function () {
            if(stack.length>=10){
                alert("栈已满，不能再继续入栈操作！");
                $("#operateStack").val("");
            } else {
                img.src='../components/img/stackIn.png';
                img.onload = function(){
                    context.drawImage(img,500,180);
                    console.log(img.width);
                };
                var drawTimes=0;
                var stackInInterval=setInterval(function () {
                    context.save();
                    //清空画布
                    context.clearRect(0,0,200,500);
                    //绘制当前的栈
                    drawStackFinal(context,stack);
                    //绘制元素
                    drawRect(context,100,50+40*drawTimes, 50, 40,1, '#fff', '#FF0', $("#operateStack").val(),"#000",5,25 );
                    //绘制箭头
                    drawLineArrow(context,200,75+drawTimes*40,160,75+drawTimes*40,'#000');
                    drawTimes+=1;
                    if (drawTimes > (10-stack.length)){
                        clearInterval(stackInInterval);
                    }
                    context.restore();
                },100);

                //绘制最终的结果
                setTimeout(function () {
                    stack[stack.length]=$("#operateStack").val();
                    drawStackFinal(context,stack);
                    $("#operateStack").val("");
                },3000)
            }
        });

        $("#outStack").click(function () {
            if(stack.length<=0){
                alert("栈已空，不能再继续出栈操作！");
                $("#operateStack").val("");
            } else {
                img.src='../components/img/stackOut.png';
                img.onload = function(){
                    context.drawImage(img,500,180);
                    console.log(img.width);
                };
                var drawTimes=0;
                var outElement=stack[stack.length-1];
                stack.length--;
                var stackOutInterval=setInterval(function () {
                    context.save();
                    //清空画布
                    context.clearRect(0,0,200,500);
                    //绘制当前的栈
                    drawStackFinal(context,stack);
                    //绘制元素
                    drawRect(context,100,50+40*(10-stack.length)-40*drawTimes, 50, 40,1, '#fff', '#FF0', outElement,"#000",5,25 );
                    //绘制箭头
                    drawLineArrow(context,200,75+40*(10-stack.length)-40*drawTimes,160,75+40*(10-stack.length)-40*drawTimes,'#000');
                    drawTimes+=1;
                    if (drawTimes > (10-stack.length)){
                        clearInterval(stackOutInterval);
                    }
                    context.restore();
                },100);


                setTimeout(function () {
                    drawStackFinal(context,stack);
                    $("#operateStack").val("");
                },3000)
            }
        })



    };


</script>
</html>

溪午不闻钟_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
使用canvas制作简易的数据结构核心算法演示系统——栈与队列(一)——栈的操作

栈栈（stack）又名堆栈，它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶，相对地，把另一端称为栈底。栈具有先进后出（FIFO）的特点入栈和出栈向一个栈插入新元素又称作进栈、入栈或压栈，它是把新元素放到栈顶元素的上面，使之成为新的栈顶元素；从一个栈删除元素又称作出栈或退栈，它是把栈顶元素删除掉，使其相邻的元素成为新的栈顶元素。入栈和出栈核心代码...
复制链接

扫一扫