上效果图：

#先看生成随机迷宫的代码吧↓
 <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. Visual Studio 2015 安装笔记

  2. 毕向东_Java基础视频教程第19天_IO流（01~05）

    第19天-01-IO流(BufferedWriter) 字符流的缓冲区 缓冲区的出现提高了对数据的读写效率. 对应类缓冲区要结合流才可以使用. BufferedWriter BufferedReade ...

  3. weixin设置菜单

    https://jingyan.baidu.com/article/925f8cb8dfcf11c0dce05661.html

  4. Redis安装和部署--LINUX

    一.安装 1.下载3.0.7稳定版本即可 地址:http://www.redis.cn/download.html 2.将 redis-3.0.7.tar.gz 压缩包拷贝到 opt 目录下 3.解压 ...

  5. Visual Studio 2017 连接Oracle

    VS 2017 连接 Oracle 12 因为Visual Studio自带的数据文件已经不能支持超过10g以上的了,所以需要另外 下载插件 本机环境 宿主机的环境:win7,Visual Studi ...

  6. 音乐mp4网站 汽车服务工程 张旭

  7. android 智能指针的学习先看邓凡平的书扫盲 再看前面两片博客提升

    android 智能指针的学习先看邓凡平的书扫盲 再看前面两片博客提升

  8. 彻底关闭Firefox自动更新的方法

    自己最近在使用firefox进行自动化测试时,发现配置好的firefox总是会自动更新,主要是因为一些高版本的浏览器无法安装firepath,没有firepath的火狐浏览器使用起来总是有很多的不方便 ...

  9. 0-创建scott数据

    CREATE TABLE dept (  deptno INT PRIMARY KEY,  dname VARCHAR(14),  loc VARCHAR(13) );   INSERT INTO d ...

  10. JavaScript学习记录总结（八）——全选、反选

    <!DOCTYPE html><html><head><title>checkboxs.html</title> <meta name ...