上效果图：

#先看生成随机迷宫的代码吧↓
 <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. 客户端和服务端如何使用Token和Session

    一.我们先解释一下他的含义:    1.Token的引入:Token是在客户端频繁向服务端请求数据,服务端频繁的去数据库查询用户名和密码并进行对比,判断用户名和密码正确与否,并作出相应提示,在这样的背 ...

  2. 微软在WPC 2015中为“伙伴们”带来了什么？

    在微软 WPC 2015(微软全球合作伙伴大会)上,微软全球渠道总监 Phil Sorgen 指出,微软总营收的 92% 来自合作伙伴.这句话验证了微软与合作伙伴间日益紧密的合作关系,也点出了本次大会 ...

  3. fiddler抓取APP请求

    必备环境: 1.电脑上已经安装fiddler 2.手机和电脑在同一局域网 设置:Fiddler>Tools>Fiddler Options>Connections 勾选Allow r ...

  4. web前端与后端的理解区分

    要了解web前后端的区别,首先必须得清楚什么是web前端和web后端. 首先:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思.现广泛译作网络.互联网等技术领域.表现为三种形式,即超文本 ...

  5. MyCAT源码分析——分析环境部署

    为了更好地了解mycat的原理,计划对mycat源码进行通读一遍,根据实际业务环境进行相关源码优化. 一.环境描述 操作系统:windows 10 x64 软件:jdk 1.7+   maven   ...

  6. SCOM中的通配符

    通配符模式匹配按从左到右的方式完成,一次匹配一个字符或基本通配符模式.模式和传入字符串必须完全匹配,因此,举例来说,模式“abc”与字符串“abcd”不匹配.复合模式包含由 (&) 号或波形符 ...

  7. 多变量线性回归 matlab

    %multivariate_linear_regression data=load('data.txt'); x=data(:,1:2); y=data(:,3); m=length(x(:,1)); ...

  8. awk 截取某段时间的日志

    好久没有截取nginx/haproxy 中 的日志了,竟有点不熟悉了. 记录一下,以免以后忘记. NGINX 日志格式: 192.168.1.26 - - [14/Sep/2017:16:48:42 ...

  9. 78、WebClient实现上传下载 System.Net、System.Uri类

    高层类.使用简单.均支持异步版本.支持http,https,fpt,files等URI. 一.下载 方法: Stream= client.OpenRead(serverUri): 打开一个可读的流.对 ...

  10. 【C语言天天练（二二）】位操作

    C的位运算符 1.二进制反码或按位取反:~ ~(10011010) = (01100101). 假设val是一个unsigned char,~val不改名原来val的值. 2.位与:& 二进制 ...