黑客帝国雨效果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>
效果截图：
原文地址：https://www.cnblogs.com/liubeimeng/p/10618388.html
时间： 2024-10-29 13:52:39