话不多说上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数字雨</title>
<style>
body{
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
</style>
<script>
window.onload=function(){
var drCav = document.getElementById("digitalRain");
/*将画布大小设置为窗口文档显示区大小*/
var width = window.innerWidth;
var height = window.innerHeight;
drCav.width = width;
drCav.height = height;
var fontsize = 16; //数字字体大小
var columns = Math.ceil(width / fontsize); //列数(向上取整)
var dropLine = [];
for (var i = 0; i < columns; i++) {
dropLine[i] = 0;
}
/*Run*/
if(drCav.getContext){
var ctx = drCav.getContext("2d");
timer = setInterval(draw, 30);
}
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; //设置透明度,逐渐覆盖之前的数字
ctx.fillRect(0, 0, width, height); //填充画布
ctx.fillStyle = "#00FF00";
ctx.font = fontsize + "px Simsun";
for (var i = 0; i < columns; i++) {
var figure = Math.floor(Math.random()*10); //生成0~9的伪随机数
/*绘制数字(核心部分)*/
ctx.fillText(figure, i * fontsize, dropLine[i] * fontsize);
if (dropLine[i] * fontsize > height || Math.random() > 0.95){
dropLine[i] = 0;
}
dropLine[i]++;
}
}
}
</script>
</head>
<body>
<canvas id="digitalRain">
</canvas>
</body>
</html>