上效果图：

#先看生成随机迷宫的代码吧↓
 <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. cacti 安装与 与不能显示图像故障解决方案

    on debian 7&8 apt-get install snmp snmpd apt-get install cacti cacti-spine apt-get install moreu ...

  2. QT开发（一）Vs2013集成 QT5.3.1

    原文:http://www.cnblogs.com/aoldman/p/3860837.html 很久不写随笔了,真是越来越懒.最近公司要做一款产品,想使用QT不用WPF lol,让苦逼的.net的我 ...

  3. The String class's judging function

    字符串的判断功能: package com.itheima_03; /* * Object:是类层次结构中的根类,所有的类都直接或者间接的继承自该类. * 如果一个方法的形式参数是Object,那么这 ...

  4. 安卓app开发-01-开发工具及环境配置

    安卓app开发-01-开发工具及环境配置 请大家根据推荐指数和自己的意愿选择 使用 Android Studio 1.可以使用 Android Studio 下载地址:http://www.andro ...

  5. 1.Mysql简介

    1.MySQL是一个关系型数据库管理系统. MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 最流行的关系型数据库管理系统,在 WE ...

  6. asp.net mvc4 小问题

    最近在学习mvc4中间出现一些问题.留作记录.. 1.新建立的项目在vs2013中运行后会出现一个长轮询..这个叫browserLink 是vs2013中新加入的东西.至于更多解释.直接百度.. 关闭 ...

  7. 找工作笔试面试那些事儿(13)---操作系统常考知识点总结 ZZ 【操作系统】

    http://blog.csdn.net/han_xiaoyang/article/details/11285485 上一节对数据库的知识做了一个小总结,实际找工作过程中,因为公司或单位侧重点不一样, ...

  8. 用canvas播放scratch文件

    原文地址:https://blog.csdn.net/qq_36268036/article/details/84262540 基于Github上的scratch-render实现sb2或者sb3文件 ...

  9. 如此繁荣的移动webapp开发市场：总结当下的一些移动web开发套件

    写在前面: 因为移动市场的盛行带动了移动社交.移动购物.手游.智能化硬件等多个新兴领域.智能终端硬件水平越来越高,运行其上的web浏览器能力也越来越强,加上HTML5\JS\CSS的蓬勃发展,Web已 ...

  10. CAMediaTimingFunction的使用

    CAMediaTimingFunction的使用 CAMediaTimingFunction可以用在POP动画的自定义动画当中,算是非常实用的工具,当然,系统的动画也是可以使用的. 效果: 需要用到的 ...