黑客面板特效文字矩阵
转载自木鱼_Max，原文链接：https://blog.csdn.net/weixin_38785697/article/details/79069352，黑客文字矩阵特效，下面展示代码。
<!DOCTYPE html>
<html lang="en">
<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：","");
str = null;
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>
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
