您当前的位置:网站首页>其他分享>酷炫黑客电脑数字屏

酷炫黑客电脑数字屏

2022年06月04日投稿作者：围观人数：1958

所用到的知识点

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 = "www.lvxiazi.cn"; //可以修改下落文字
		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>