黑客文字矩阵特效

最新推荐文章于 2024-04-18 10:03:24 发布

木鱼_Max

最新推荐文章于 2024-04-18 10:03:24 发布

阅读量2.1k

点赞数 1

分类专栏： Jscript 文章标签：文字特效黑客特效

Jscript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个基于HTML5 Canvas的文字矩阵特效实现方法。通过用户自定义显示的文字内容，并结合随机颜色和位置更新，创建出类似黑客帝国中的文字滚动效果。文章提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上看到一个老师做的文字特效，自己改了一点加入自定义要显示的文字，还有文字随机，文字随机是网上拿过来的，有兴趣的可以看看。觉得挺不错的，膜拜一切代码高手。

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 <head>
  <title>黑客面板特效之文字矩阵</title>
  <meta name="generator" content="editplus">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <meta name="description" content="">
 <link href="css/index.css" rel="stylesheet" type="text/css">
 </head>

 <body>
 <!--画板-->
	<canvas id="tie"></canvas>
 </body>
<script>
 //定制要打印的文字数组
   var str=[];
    str=prompt("请输入你要显示的文字矩阵,默认为01：","");
	if(str!=null&&str!=""){
		str=str;
	}else{
		str="0101010010101011111100001101010101010"	;//如果用户未输入就让文字为此数组
	}
	//console.log(str);
 	<!--取得画板工具-->
 	var canvas=document.getElementById("tie");
	//取得画板的合法值
	var ctx=canvas.getContext("2d");
	var s=window.screen;
	var w=s.width;//取得屏幕的宽度
	var h=s.height;//取得屏幕的高度
	canvas.width=w;//让画板的高度和宽度都为屏幕的高度和宽度
	canvas.height=h;
	//设置文字的字体大小
	var fontSize=18;
	//计算屏幕一行很放下多少个文字
	var clos=Math.floor(w/fontSize);
	//console.log(clos);
	//设置文字的位置和文字的样式
	ctx.font="600 "+fontSize+"px 微软雅黑";//600为字体加粗的大小，记得600 后面要加空格
	//申明一个数组
	var drops=[];
	//计算每一个文字所谓坐标 存储y轴的坐标
	for(var i=0;i<clos;i++){
		drops.push(0);
		}
		//随机颜色函数
	function getRandomColor() 
{ 
	var c = '#'; 
	var cArray = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']; //准备好要用的颜色拼接值
	for(var i = 0; i < 6;i++) //因为要用到6个数值 具体看自定义颜色面板
	{ 
	var cIndex = Math.round(Math.random()*15); //数组长度为16但数组下表从0开始故为15
	c += cArray[cIndex]; //拼接颜色值
	} 
	return c; 
} 
	function draw(){
		ctx.fillStyle="rgba(0,0,0,0.05)";//设置背景颜色和透明度
		ctx.fillRect(0,0,w,h);
		ctx.fillStyle=getRandomColor();
			for(var i=0;i<clos;i++){
				var y=drops[i]*fontSize;//也让y轴方向也向下掉一个文字的距离
				//Math.radom() 是0-1之间的数值
				//设置文字出发时间随机 str[Math.floor(Math.random()*str.length)] 让数组里面的文字索引随机出现
				ctx.fillText(str[Math.floor(Math.random()*str.length)],i*fontSize,y);
				if(y>=canvas.height&&Math.random()>0.99){
					drops[i]=0;
					}
				drops[i]++;//让数组里面的值每次加一，用于上面的y轴下掉
				}
		}
		setInterval(draw,40); //设置40毫秒定时器，用来调用文字绘制方法
 </script>
</html>