几行代码实现酷炫数字雨网页效果

所用到的知识点

1.canvas 

<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。 

<canvas> 标签只是图形容器,必须使用脚本来绘制图形。


2.window尺寸 

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度 

对于 Internet Explorer 8、7、6、5:

document.documentElement.clientHeight

document.documentElement.clientWidth 

或者

document.body.clientHeight

document.body.clientWidth


3.填充方法: 

fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。 

fillRect:绘制”被填充”的矩形。 

fillText:在画布上绘制”被填充的”文本。


4.Math数学函数 

floor(x):对 x 进行下舍入。 

setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。该方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 该方法返回的 ID 值可用作 clearInterval() 方法的参数。 

clearInterval():取消由 setInterval() 设置的 timeout。

<html><head>
	<title>Digital Rain</title>
	<meta charset="UTF-8">
	<style> * {margin: 0; padding: 0;} body {background: #fff;} canvas {display: block;}</style></head><body>
	<canvas id="ad" height="100%" width="100%"></canvas>
	<script> 
		var ad = document.getElementById("ad");
		var ctx = ad.getContext("2d"); 
		ad.height = window.innerHeight; 
		ad.width = window.innerWidth; 
		var chinese = "onlychen"; //可以修改下落文字
		chinese = chinese.split(""); 
		var font_size = 12; //可以修改文字大小
		var columns = ad.width / font_size; 
		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, ad.width, ad.height); 
			ctx.fillStyle = "#0F0";//可以修改文字颜色
			ctx.font = font_size + "px arial"; 
			for (var i = 0; i < drops.length; i++) { 
				var text = chinese[Math.floor(Math.random() * chinese.length)]; 
				ctx.fillText(text, i * font_size, drops[i] * font_size); 
				if (drops[i] * font_size > ad.height && Math.random() > 0.975) drops[i] = 0; 
				drops[i]++; } } 
				setInterval(draw, 30);
	</script></body></html>