黑客帝国雨效果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>效果截图：
黑客帝国雨效果JS
原文地址：https://www.cnblogs.com/liubeimeng/p/10618388.html