當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

HTML+JavaScript实现黑客帝国代码雨

發(fā)布時(shí)間：2023/12/31 javascript 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+JavaScript实现黑客帝国代码雨小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

直接上代碼。。。
HTML：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"><title>黑客帝國代碼雨</title> </head><body onselectstart="false"><canvas id="canvas" height="100%" width="100%"></canvas><style type="text/css">html,body{margin: 0; padding: 0; overflow: hidden;} </style><script type="text/javascript"> //JavaScript : rain.js by Jerry//canvas控制var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');//canvas畫布大小canvas.height = window.innerHeight;canvas.width = window.innerWidth;var texts = '0123456789'.split(''); //下落數(shù)組//文字大小var fontSize = 16;var columns = canvas.width/fontSize;// 用于計(jì)算輸出文字時(shí)坐標(biāo)，所以長度即為列數(shù)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 = '#0055ff';ctx.font = fontSize + 'px 楷體'; //字體//逐行輸出文字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, 36); //下落速度 </script></body></html>

效果：

總結(jié)

以上是生活随笔為你收集整理的HTML+JavaScript实现黑客帝国代码雨的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：《maven的学习》尚硅谷Maven视
下一篇： onload事件_图像onLoad事件+