黑客帝国雨效果JS。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0;padding: 0;} body{overflow: hidden;} canvas{background: #111;} </style> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var W = window.innerWidth; var H = window.innerHeight; canvas.width = W; canvas.height = H; var fontSize = 16; //计算列 var colunm = Math.floor(W/fontSize); //console.log(colunm); //存储Y值 var drops = []; for(var i = 0;i<colunm;i++){ drops[i] = 1; } //console.log(...drops) var str = "Welcome JavaScript"; //let tempRandom = Math.random()*str.length; //console.log(tempRandom,Math.floor(tempRandom)) //把文字画到屏幕上 function draw(){ context.fillStyle = "rgba(0,0,0,0.05)";//文字随机出现的背景 context.fillRect( 0, 0, W, H); context.font = "700 " + fontSize + "px ARIAL"; context.fillStyle = "#00cc33"; //context.fillStyle = randColor(); //console.log("你好"); for(var i = 0; i<colunm; i++){ //让字符串中的内容随机出现 var index = Math.floor(Math.random()*str.length); var x = i*fontSize; var y = drops[i]*fontSize; context.fillText(str[index],x,y); console.log(str[index],x,y); if(y>=canvas.height && Math.random()>0.99){ drops[i] = 0; } drops[i]++; } } function randColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); return "rgb("+r+","+g+","+b+")"; } draw(); setInterval(draw,20); </script> </body> </html>
效果截图：
