黑客帝国 数字雨 | 您所在的位置:网站首页 › cmd数字雨全屏 › 黑客帝国 数字雨 |
黑客帝国的数字雨给人一种神秘科技感,你自己也可以实现这种高大上的神秘数字雨啦!我们先来展示下成果: 这就是小编自己用电脑做的,这时动态的哦! 具体怎么做呢? 首先右击桌面,新建一个文本文档, 复制一下以下代码进去,保存; 重命名,将后缀改为html;小编就随便取了个名字叫雨2,如图: (后缀名如何更改,请下篇文章,后缀的更改) 黑客帝国 body { margin: 0; padding: 0; overflow: hidden; } var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; var texts = '156dsfcac'.split(''); var fontSize = 16; var columns = canvas.width / fontSize; // 用于计算输出文字时坐标,所以长度即为列数 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, canvas.width, canvas.height); //文字颜色 ctx.fillStyle = '#0F0'; ctx.font = fontSize + 'px arial'; //逐行输出文字 for (var i = 0; i < drops.length; i++) { var text = texts[Math.floor(Math.random() * texts.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) { drops[i] = 0; } drops[i]++; } } setInterval(draw, 33); |
CopyRight 2018-2019 实验室设备网 版权所有 |