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

所用到的知识点

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。Markup

<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 = "xwenw.com"; //可以修改下落文字
		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>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。