上效果图：

#先看生成随机迷宫的代码吧↓
 <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. Latex表格太宽处理方法 (How to shorten Latex table length)

    当表格太宽时, 为了能在页面中显示完整, 可以缩小表格, 或者横排.缩小表格的好处是, 不用倒转页面阅读, 坏处是原始宽度不同的表格, 被缩小后, 字体不一, 不美观. 虽然可以调整参数使得所有表格字 ...

  2. Android 黑色样式menu

    效果图:

  3. 菜单Menu（AS开发实战第四章学习笔记）

    4.5 菜单Menu Android的菜单主要分两种,一种是选项菜单OptionMenu,通过按菜单键或点击事件触发,另一种是上下文菜单ContextMenu,通过长按事件触发.页面的布局文件放在re ...

  4. Datatables跳转到指定页

    因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables 跳转到指定页#功能,实现代码如下: table = $('#user-table').data ...

  5. react native学习资料

    一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...

  6. macvtap与vhost-net技术

    MacVlan的功能是给同一个物理网卡配置多个MAC地址,可以在软件上配置多个以太网口,属于物理层的功能.MacVTap是用来替代TUN/TAP和Bridge内核模块的.MacTap是基于MacVla ...

  7. CentOS7.x使用yum安装Mysql5.6

    先检查是否存在已安装的MySQL # yum list installed | grep mysql 若存在删除: yum remove 软件名称 CentOS 7的yum源中没有正常安装mysql时 ...

  8. 网络编程进阶---->>> hamc模块 socketserver模块验证合法性 两者进行通信连接

    我们在工作中经常遇到,你公司内的某一台电脑要去访问你的服务器或者一个服务端电脑,那么你是让每一台都进行连接吗?  那不可能的  你肯定要进行限定的 验证客户端链接的合法性: hamc模块 hamc也是 ...

  9. 计算机作业（Excel课程表） 物联网 王罗红

  10. 深入浅出SharePoint2012——安装Report Service

    安装顺序 Microsoft .NET Framework 3.5 SP1 report service installation,pls SQLServer2008R2SP1-KB2528583-x ...