文字瀑布流

最新推荐文章于 2023-11-25 00:15:00 发布

逢世麦麦

最新推荐文章于 2023-11-25 00:15:00 发布

阅读量261

点赞数

本文链接：https://blog.csdn.net/weixin_45583311/article/details/100143253

版权

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>文字瀑布流</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0
			}
		</style>
	</head>

	<body>
		<div id="test"></div>
		<br>
		<input onclick="operateAnimation(this)" id="operate" type="button" value="暂停" />
		<br>
		<canvas id="canvas" style="background:#000"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("canvas");
			var context = canvas.getContext("2d");
			var W = window.innerWidth ||
				document.documentElement.clientWidth ||
				document.body.clientWidth;
			var H = window.innerHeight ||
				document.documentElement.clientHeight ||
				document.body.clientHeight;
				
			canvas.width = W;
			canvas.height = H;
			var fontSize = 16;
			//列  
			var colunms = Math.floor(W / fontSize);
			var drops = [];
			for(var i = 0; i < colunms; i++) {
				drops.push(0);
			}
			console.log(drops);
			var str = "显示的运动字体";
			function draw() {
				context.fillStyle = "rgba(0,0,0,0.05)";
				context.fillRect(0, 0, W, H);
				context.font = "700 " + fontSize + "px  微软雅黑";
				context.fillStyle = "#00cc33";
				for(var i = 0; i < colunms; i++) {
					var index = Math.floor(Math.random() * str.length);
					var x = i * fontSize; //x坐标  
					var y = drops[i] * fontSize;
					context.fillText(index, x, y);
					if(y >= canvas.height && Math.random() > 0.99) {
						drops[i] = 0;
					}
					drops[i]++;
				}
			};
			draw();
			var intervalId = setInterval(draw, 50);

			// 开始/暂停  
			function operateAnimation(objBtn) {
				var operate = document.getElementById("operate");

				if(objBtn.value == "开始") {
					objBtn.value = "暂停";
					intervalId = setInterval(draw, 50);
				} else {
					objBtn.value = "开始";
					clearInterval(intervalId);
				}
				return false;
			}
		</script>
	</body>

</html>