Canvas之代码雨

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				overflow: hidden;
			}
			canvas{
				/* border: 1px solid red; */
				overflow: hidden;
			}
			.img{
				width: 31.25rem;
				height: 20.625rem;
				/* 背景图片 */
				background-image: url(img/lADPD3lGq8dJ2dnNAU3NAfQ_500_333.jpg);
				border-radius:50%;
				/* 定位 */
				position: absolute;
				left: 45.5625rem;
				top: 16rem;
				opacity: 0.3;
			}
		</style>
	</head>
	<body>
		<div class="img">
			
		</div>
		<canvas id="canvas"></canvas>
	</body>
	<script type="text/javascript">
		//找画布
		var canvas=document.getElementById("canvas");
		//找到笔
		var context=canvas.getContext("2d");
		//获取浏览器文档区域的宽度
		var w=window.innerWidth;
		//获取....高度
		var h=window.innerHeight;
		//把获取到的宽度和高度赋值canvas
		canvas.width=w;
		canvas.height=h;	
		//开始绘图
		context.beginPath();
		//思考？能允许多少字母下滑
		var fontsize=12;
		//列数
		var count=Math.floor(w/fontsize);
		var str="I ILVE YOU";
		//创建一个数组
		var arr=[];
		for(var i=0;i<count;i++){
			arr.push(0);
			}
		// // //绘制背景
		// context.fillStyle="rgba(0,0,0,0.05)";
		// context.fillRect(0,0,w,h);
				
		var show=function(){
			// //绘制背景  rgba透明
			context.fillStyle="rgba(0,0,0,0.05)";
			context.fillRect(0,0,w,h);
			//再页面上添加一个文字颜色
			context.fillStyle="greenyellow";
			//			   粗细  大小   样式
			context.font='700 '+fontsize+'px 宋体';
			for (var i = 0; i <count; i++) {
				
				var index=Math.floor(Math.random()*str.length);
			    var x=i*fontsize;
				var	y=arr[i]*fontsize;
				context.fillText(str[index],x,y);
				if(y>h&& Math.random()>0.99){
					arr[i]=0;
				}
				arr[i]++;
			}		 		
		}		
		//JS中的计时器，每隔多少毫秒执行一次
		setInterval(show,30);
		//结束绘图
		context.closePath();
	</script>
</html>
猜你喜欢
