上效果图：

#先看生成随机迷宫的代码吧↓
 <html>

 <head>

 <title>生成随机迷宫v1.0</title>

 </head>

 <body>

 <center style="margin-top: 20px;">

     <canvas id="myCan1" title="作者：谢辉"></canvas>

     <p>生成随机迷宫v1.0</p>

     <button onclick="history.go(0);">刷新</button>

 </center>

 </body>

 <script>

 var width = 1600;

 var height = 800;

 var cellWidth = 40;

 var canvas = document.getElementById("myCan1");

 var cxt = canvas.getContext("2d");

 // 初始化canvas容器

 function initCanvas() {

     canvas.width = width;

     canvas.height = height;

     canvas.style = "border-radius: 15px";

     canvas.style.border = "1px solid #3b3b3b";

 };

 initCanvas();

 // 初始化画布

 function initContext(cxt) {

     cxt.lineCap="round";

     cxt.lineJoin="round";

     cxt.lineWidth = 1;

 }

 initContext(cxt);

 // 开始画迷宫

 function drawMaze(cxt) {

     drawSingleBox(8, 0, 0, cxt);

 };

 /*setInterval(function(){

     cxt.clearRect(0, 0, width, height);

     drawMaze(cxt);

 }, 50);*/

 drawMaze(cxt);

 // 递归画单元格

 function drawSingleBox(option, posX, posY, cxt){

     //cxt.strokeStyle = getColor();

     switch(option){

     case 0:

         cxt.beginPath();

         cxt.moveTo(posX, posY);

         cxt.lineTo(posX + cellWidth, posY);

         cxt.stroke();

         break;

     case 1:

         cxt.beginPath();

         cxt.moveTo(posX + cellWidth, posY);

         cxt.lineTo(posX + cellWidth, posY + cellWidth);

         cxt.stroke();

         break;

     case 2:

         cxt.beginPath();

         cxt.moveTo(posX, posY + cellWidth);

         cxt.lineTo(posX + cellWidth, posY + cellWidth);

         cxt.stroke();

         break;

     case 3:

         cxt.beginPath();

         cxt.moveTo(posX, posY);

         cxt.lineTo(posX, posY + cellWidth);

         cxt.stroke();

         break;

     }

     if(posX >= width - cellWidth && posY >= height - cellWidth) {

         return;

     } else {

         posX += cellWidth;

         if(posX >= width){

             posX = 0;

             posY += cellWidth;

         }

         drawSingleBox(Math.floor(Math.random()*4), posX, posY, cxt);

     }

 }

 // 随机出任意颜色

 function getColor(){

     var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";

     var colorArray = colorElements.split(",");

     var color ="#";

     for(var i =0;i<6;i++){

         color+=colorArray[Math.floor(Math.random()*16)];

     }

     return color;

 }

 </script>

 </html>

生成随机迷宫

#去掉代码注释，神奇的一幕出现了，自己看看吧
 setInterval(function(){

     cxt.clearRect(0, 0, width, height);

     drawMaze(cxt);

 }, 50);

去掉此段代码的注释

利用纯JS和HTML Canvas生成随机迷宫过程中产生的有趣的事情的更多相关文章

  1. 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览

    ### 利用Gulp实现JSDoc 3的文档编写过程中的实时解析和效果预览 http://segmentfault.com/a/1190000002583569

  2. C#怎么在生成解决方案的过程中执行perl脚本(C#早期绑定)

    转载 怎么在生成解决方案的过程中执行perl脚本 早期绑定在编译期间识别并检查方法.属性.函数,并在应用程序执行之前执行其他优化.在这个绑定中,编译器已经知道它是什么类型的对象以及它拥有的方法或属性. ...

  3. 微信小程序 canvas 生成随机验证码

    转载:https://blog.csdn.net/qq_16646819/article/details/81020245?utm_source=blogxgwz0 js // pages/bind/ ...

  4. js根据条件json生成随机json：randomjson

    前端开发中,在做前后端分离的时候,经常需要手写json数据,有3个问题特别揪心: 1,数据是写死的,不能按一定的条件随机生成长度不一,内容不一的数据 2,写数组的时候,如果有很多条,需要一条一条地写, ...

  5. 用Canvas生成随机验证码(后端前端都可以)

    一 .使用前端生成验证码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  6. captcha.js一个生成验证码的插件，使用js和canvas生成

    一.captcha`captcha.js`是一个生成验证码的插件,使用js和canvas生成的,确保后端服务被暴力攻击,简单判断人机以及系统的安全性,体积小,功能多,支持配置. 验证码插件内容,包含1 ...

  7. js生成随机固定长度字符串的简便方法

    概述 碰到一个需求:用js生成固定长度的字符串.在网上查了很多资料,网上的方法都比较麻烦.我自己灵光一现,实现了一个比较简单的方法.记录下来,供以后开发时参考,相信对其他人也有用. js生成随机字符串 ...

  8. 纯js生成QRCode

    纯js,不依赖jquery,非常好用,废话不多说,直接上代码! <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

随机推荐

  1. 结对编程项目总结（core2组）

    结对编程项目总结(core2组) 作业---四则运算(Core 第二组)   ----by 吴雪晴 PB16061514 齐天杨 PB16060706 一.项目简介 项目的任务为制作一个给(貌似是?) ...

  2. 解决Spring框架下中文乱码的问题

    在使用了Spring框架下回发现很多表单交互的地方会发生乱码,而且写到数据库中也是乱码,这其实还是字符编码的问题,在我们还在用自己写的servlet的时候,直接在request和response加上字 ...

  3. 如何在 Azure 中的经典 Windows 虚拟机上设置终结点

    在 Azure 中使用经典部署模型创建的所有 Windows 虚拟机都可以通过专用网络通道与同一云服务或虚拟网络中的其他虚拟机自动通信. 但是,Internet 或其他虚拟网络中的计算机需要终结点将入 ...

  4. DAO层，Service层，Controller层、View层介绍

    来自:http://jonsion.javaeye.com/blog/592335 DAO层 DAO 层主要是做数据持久层的工作,负责与数据库进行联络的一些任务都封装在此,DAO层的设计首先是设计DA ...

  5. C++程序暂停

    //这里的getchar();用来暂停程序,以便查看程序输出的内容 //也可以用system("pause");等来代替

  6. Samba文件共享服务器配置

    Samba起源: 早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序:NFS ...

  7. January 12 2017 Week 2 Thursday

    Although it rains, throw not away your watering pot. 纵然天下雨,休把水壶丢. Don't throw away your watering pot ...

  8. [BZOJ 2322][BeiJing2011]梦想封印

    梦想封印 题意 原题面: Problem 2322. -- [BeiJing2011]梦想封印 2322: [BeiJing2011]梦想封印 Time Limit: 20 Sec  Memory L ...

  9. Android 6.0动态权限申请教程

    转载请标明出处: http://www.cnblogs.com/why168888/p/6580396.html 本文出自:[Edwin博客园] PermissionManage 介绍 如果设备运行的 ...

  10. LoadRunner 测试Socket接口函数说明

    lrs_save_param_ex是lrs_save_param的扩展函数,包含了lrs_save_param的基本功能.其函数语法结构如下: int lrs_save_param_ex ( char ...