h5canvans元素实现代码流特效

最新推荐文章于 2023-09-05 23:04:47 发布

落花有意，树无情

最新推荐文章于 2023-09-05 23:04:47 发布

阅读量613

点赞数

分类专栏： # html 文章标签：特效 html

本文链接：https://blog.csdn.net/q918922703_1/article/details/95041803

版权

html 专栏收录该内容

7 篇文章 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>
		<!--创建一个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>