Created
September 7, 2017 00:52
-
-
Save liuxd/a80a5854824bec2cd708f779b49c78a2 to your computer and use it in GitHub Desktop.
matrix.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| canvas { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="matrix"></canvas> | |
| <script> | |
| var c = document.getElementById("matrix"); | |
| var ctx = c.getContext("2d"); | |
| //全屏 | |
| c.height = window.innerHeight; | |
| c.width = window.innerWidth; | |
| //文字 | |
| var txts = "0123456789abcdefghigklmgopqrstuvwxyz"; | |
| //转为数组 | |
| txts = txts.split(""); | |
| var font_size = 16; | |
| var columns = c.width/font_size; | |
| //用于计算输出文字时坐标，所以长度即为列数 | |
| var drops = []; | |
| //初始值 | |
| for(var x = 0; x < columns; x++) | |
| drops[x] = 1; | |
| //输出文字 | |
| function draw() | |
| { | |
| //让背景逐渐由透明到不透明 | |
| ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; | |
| ctx.fillRect(0, 0, c.width, c.height); | |
| ctx.fillStyle = "#0F0"; //文字颜色 | |
| ctx.font = font_size + "px arial"; | |
| //逐行输出文字 | |
| for(var i = 0; i < drops.length; i++) | |
| { | |
| //随机取要输出的文字 | |
| var text = txts[Math.floor(Math.random()*txts.length)]; | |
| //输出文字，注意坐标的计算 | |
| ctx.fillText(text, i*font_size, drops[i]*font_size); | |
| //如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同） | |
| if(drops[i]*font_size > c.height || Math.random() > 0.95) | |
| drops[i] = 0; | |
| //用于Y轴坐标增加 | |
| drops[i]++; | |
| } | |
| } | |
| setInterval(draw, 40); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment