h5canvans元素实现代码流特效

我就是我 2021-12-14 04:37 228阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>canvas代码流</title>
    		<style type="text/css">
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    			body{
    				/*background-color: black;*/
    				overflow: hidden;
    			}
    			canvas{
    				background-color: black;
    			}
    		</style>
    	</head>
    	<body>
    		<canvas id="dateflow"></canvas>
    		
    		<script type="text/javascript">
    			var canvans=document.getElementById("dateflow");//获取canvas对象
    			var context=canvans.getContext("2d");//2d绘图
    			var w=window.innerWidth;
    			var h=window.innerHeight;
    			canvans.width=window.innerWidth;
    			canvans.height=window.innerHeight;//让canvas的大小等于浏览器的大小
    			var fontSize=16;//设置字体大小
    			var col=Math.floor(canvans.width/fontSize);
    			var fy=[];
    			for(var i=0;i<col;i++){
    				fy[i]=1;
    			}//记录每列文字的y轴坐标
    			var date1="javaScriptfor:/@#$$%";
    			//绘制
    			draw();
    			setInterval(draw,40);
    			function draw(){
    				context.beginPath();
    				context.fillStyle = "rgba(0,0,0,0.05)";
    				context.fillRect(0,0,w,h);//填充背景
    				context.font=fontSize+"px bold 楷体";
    				context.fillStyle="#0000FF";
    				for(var i=0;i<col;i++){
    					var index=Math.floor(Math.random()*date1.length);//随机获取某一文字的索引
    					var x = i*fontSize;
                    	var y = fy[i]*fontSize;
                    	context.fillText(date1.charAt(index),x,y);//画出这个字
                    	if(y >= h && Math.random()> 0.99)// 出现时间延迟的效果；
                    	{
                    		fy[i]=0;//当y的值大于h时
                    	}
                    	fy[i]++;
    				}
    			}
    		</script>
    	</body>
    </html>