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

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

溪午不闻钟_

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

阅读量201

点赞数

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

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

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

队列

队列是一种特殊的线性表，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。进行插入操作的端称为队尾，进行删除操作的端称为队头。
队列具有先进先出（FIFO）的特点

入队列和出队列

入队：队q 存在。操作结果：对已存在的队列q，插入一个元素x 到队尾，队发生变化；
出队：队q 存在且非空，操作结果：删除队首元素，并返回其值，队发生变化

入队列和出队列核心算法

入队

int enQueue(SqQueue &qu,int x)
{
	if((qu.rear+1)%maxSize==qu.front)
		return 0;
	qu.rear=(qu.rear+1)%maxSize;
	qu.data[qu.rear]=x;
	return 1;
}

出队

int deQueue(SqQueue &qu,int &x)
{
	if(qu.front==qu.rear)
		return 0;
	qu.front=(qu.front+1)%maxSize;
	x=qu.data[qu.front];
	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="operateQueue">
<br>
<button type="button" id="inQueue" class="btn btn-primary">入栈</button>
<button type="button" id="outQueue" 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 queue = [];
        drawQueueFinal(context,queue);
        context.save();
        context.translate(250,250);
        context.rotate(-Math.PI/12);
        drawLineArrow(context,0,0,-100,0,"red");
        context.rotate(-Math.PI/12);
        drawLineArrow(context,0,0,-100,0,"blue");
        context.restore();


        var front=0;
        var rear=0;
        $("#inQueue").click(function () {
           if(queue.length>=7){
               alert("队列已满，不能继续入队");
           } else if ($("#operateQueue").val()==""){
               alert("请输入要加入的值");
           } else {
               queue[queue.length]=$("#operateQueue").val();
               rear++;
               if (rear===8){
                   rear=0;
               }
               //绘制队列的结构
               drawQueueFinal(context,queue,front);
               //绘制指针
               context.save();
               context.translate(250,250);
               context.rotate(Math.PI/4*front-Math.PI/12);
               drawLineArrow(context,0,0,-100,0,"red");
               context.restore();
               context.save();
               context.translate(250,250);
               context.rotate(Math.PI/4*rear-Math.PI/12);
               drawLineArrow(context,0,0,-100,0,"blue");
               context.restore();
               $("#operateQueue").val("");
           }
        });

        $("#outQueue").click(function () {
            if(queue.length<=0){
                alert("队列已空，不能继续出队");
            } else {
                front++;
                if (front===8){
                    front=0;
                }
                for(var i=0;i<queue.length;i++){
                    queue[i]=queue[i+1];
                }
                queue.length--;
                //绘制队列的结构
                drawQueueFinal(context,queue,front);
                //绘制指针
                context.save();
                context.translate(250,250);
                context.rotate(Math.PI/4*front-Math.PI/6);
                drawLineArrow(context,0,0,-100,0,"red");
                context.restore();
                context.save();
                context.translate(250,250);
                context.rotate(Math.PI/4*rear-Math.PI/12);
                drawLineArrow(context,0,0,-100,0,"blue");
                context.restore();
                $("#operateQueue").val("");
            }
        })



    };


</script>
</html>

溪午不闻钟_

关注

0
点赞
踩
0

收藏

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

队列队列是一种特殊的线性表，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。进行插入操作的端称为队尾，进行删除操作的端称为队头。队列具有先进先出（FIFO）的特点入队列和出队列入队：队q 存在。操作结果：对已存在的队列q，插入一个元素x 到队尾，队发生变化；出队：队q 存在且非空，操作结果：...
复制链接

扫一扫