前言：
现在你们对“html图片随机显示”大约比较注意，你们都想要分析一些“html图片随机显示”的相关内容。那么小编同时在网络上搜集了一些关于“html图片随机显示””的相关知识，希望小伙伴们能喜欢，朋友们一起来学习一下吧！对前端有兴趣或者正在学习web前端的小伙伴，可以私信小编【学习】即可免费领取2018最新的一整套系统web前端学习教程！
先看生成随机迷宫的代码吧
<html> 2 <head> 3 <title>生成随机迷宫v1.0</title> 4 </head> 5 <body> 6 <center style="margin-top: 20px;"> 7 <canvas id="myCan1" title="作者：谢辉"></canvas> 8 <p>生成随机迷宫v1.0</p> 9 <button onclick="history.go(0);">刷新</button>10 </center>11 </body>12 <script>13 var width = 1600;14 var height = 800;15 var cellWidth = 40;16 var canvas = document.getElementById("myCan1");17 var cxt = canvas.getContext("2d");18 // 初始化canvas容器19 function initCanvas() {20 canvas.width = width;21 canvas.height = height;22 canvas.style = "border-radius: 15px";23 canvas.style.border = "1px solid #3b3b3b";24 };25 initCanvas();26 // 初始化画布27 function initContext(cxt) {28 cxt.lineCap="round";29 cxt.lineJoin="round";30 cxt.lineWidth = 1;31 }32 initContext(cxt);33 // 开始画迷宫34 function drawMaze(cxt) {35 drawSingleBox(8, 0, 0, cxt);36 };37 /*setInterval(function(){38 cxt.clearRect(0, 0, width, height);39 drawMaze(cxt);40 }, 50);*/41 drawMaze(cxt);42 // 递归画单元格43 function drawSingleBox(option, posX, posY, cxt){44 //cxt.strokeStyle = getColor();45 switch(option){46 case 0:47 cxt.beginPath();48 cxt.moveTo(posX, posY);49 cxt.lineTo(posX + cellWidth, posY);50 cxt.stroke();51 break;52 case 1:53 cxt.beginPath();54 cxt.moveTo(posX + cellWidth, posY);55 cxt.lineTo(posX + cellWidth, posY + cellWidth);56 cxt.stroke();57 break;58 case 2:59 cxt.beginPath();60 cxt.moveTo(posX, posY + cellWidth);61 cxt.lineTo(posX + cellWidth, posY + cellWidth);62 cxt.stroke();63 break;64 case 3:65 cxt.beginPath();66 cxt.moveTo(posX, posY);67 cxt.lineTo(posX, posY + cellWidth);68 cxt.stroke();69 break;70 }71 if(posX >= width - cellWidth && posY >= height - cellWidth) {72 return;73 } else {74 posX += cellWidth;75 if(posX >= width){76 posX = 0;77 posY += cellWidth;78 }79 drawSingleBox(Math.floor(Math.random()*4), posX, posY, cxt);80 }81 }82 // 随机出任意颜色83 function getColor(){84 var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";85 var colorArray = colorElements.split(",");86 var color ="#";87 for(var i =0;i<6;i++){88 color+=colorArray[Math.floor(Math.random()*16)];89 }90 return color;91 }92 </script>93 </html>去掉代码注释，神奇的一幕出现了，自己看看吧
setInterval(function(){2 cxt.clearRect(0, 0, width, height);3 drawMaze(cxt);4 }, 50); 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html图片随机显示 #csscanvas生成
