黑客特效视频,html黑客特效

hacker2年前黑客网站150

html5黑客帝国下面代码大概什么意思呀。谢啦

HTML:

canvas id="c"/canvas

CSS:

canvas {display: block;}

*** :

var c = document.getElementById("c");

var ctx = c.getContext("2d");

//全屏

c.height = window.innerHeight;

c.width = window.innerWidth;

//文字

var txts = "0123456789";

//转为数组

txts = txts.split("");

var font_size = 16;

var columns = c.width/font_size;

//用于计算输出文字时坐标,所以长度即为列数

var drops = [];

//初始值

for(var x = 0; x columns; x++)

drops[x] = 1;

//输出文字

function draw()

{

//让背景逐渐由透明到不透明

ctx.fillStyle = "rgba(0, 0, 0, 0.05)";

ctx.fillRect(0, 0, c.width, c.height);

ctx.fillStyle = "#0F0"; //文字颜色

ctx.font = font_size + "px arial";

//逐行输出文字

for(var i = 0; i drops.length; i++)

{

//随机取要输出的文字

var text = txts[Math.floor(Math.random()*txts.length)];

//输出文字,注意坐标的计算

ctx.fillText(text, i*font_size, drops[i]*font_size);

//如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)

if(drops[i]*font_size c.height || Math.random() 0.95)

drops[i] = 0;

//用于Y轴坐标增加

drops[i]++;

}

}

setInterval(draw, 33);

解释了的很详细了。

我要黑客帝国里的数字流星雨代码,用html或asp写的

htmlstyle type="text/css"

!--

body {

background-color: #000000;

}

--

/style

Body

script language="JavaScript"

!--

if (document.all){

Cols=60;

Cl=20;//Space's are included so real length is 48!

Cs=20;

Ts=20;

Tc='#008800';

Tc1='#00ff00';

MnS=20;

MxS=30;

I=Cs;

Sp=new Array();S=new Array();Y=new Array();

C=new Array();M=new Array();B=new Array();

RC=new Array();E=new Array();Tcc=new Array(0,1);

document.write(" div id='Container' style='position:absolute;top:0;left:-"+Cs+"'");

document.write(" div style='position:relative'");

for(i=0; i Cols; i++){

S[i]=I+=Cs;

document.write(" div id='A' style='position:absolute;top:0;font-family:Arial;font-size:"

+Ts+"px;left:"+S[i]+";width:"+Ts+"px;height:0px;color:"+Tc+";visibility:hidden' /div");

}

document.write(" /div /div");

for(j=0; j Cols; j++){

RC[j]=1+Math.round(Math.random()*Cl);

Y[j]=0;

Sp[j]=Math.round(MnS+Math.random()*MxS);

for(i=0; i RC[j]; i++){

B[i]='';

C[i]=Math.round(Math.random()*1)+' ';

M[j]=B[0]+=C[i];

}

}

function Cycle(){

Container.style.top=window.document.body.scrollTop;

for (i=0; i Cols; i++){

var r = Math.floor(Math.random()*Tcc.length);

E[i] = ' font color='+Tc1+''+Tcc[r]+' /font';

Y[i]+=Sp[i];

if (Y[i] window.document.body.clientHeight){

for(i2=0; i2 Cols; i2++){

RC[i2]=1+Math.round(Math.random()*Cl);

for(i3=0; i3 RC[i2]; i3++){

B[i3]='';

C[i3]=Math.round(Math.random()*1)+' ';

C[Math.floor(Math.random()*i2)]=' '+' ';

M[i]=B[0]+=C[i3];

Y[i]=-Ts*M[i].length/1.5;

A[i].style.visibility='visible';

}

Sp[i]=Math.round(MnS+Math.random()*MxS);

}

}

A[i].style.top=Y[i];

A[i].innerHTML=M[i]+' '+E[i]+' ';

}

setTimeout('Cycle()',20)

}

Cycle();

}

// --

/script

/body

/html

演示地址:

网上找的代码,我给你改了下

HTML5模仿黑客帝国文字矩阵特效,怎么样可以确定文字显示

!DOCTYPE html

html

head

title黑客帝国效果/title

/head

body

canvas id="canvas"/canvas

style type="text/css"

body{margin: 0;

padding: 0;

overflow: hidden;}

/style

script type="text/javascript"

var canvas = document.getElementById('canvas');

var ctx = canvas.getContext('2d');

canvas.height = window.innerHeight;

canvas.width = window.innerWidth;

var texts = '0123456789'.split('');

var fontSize = 16;

var columns = canvas.width/fontSize;// 用于计算输出文字时坐标,所以长度即为列数

var drops = [];//初始值

for(var x = 0; x columns; x++){

drops[x] = 1;

}

function draw(){

//让背景逐渐由透明到不透明

ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';

ctx.fillRect(0, 0, canvas.width, canvas.height);//文字颜色

ctx.fillStyle = '#0F0';

ctx.font = fontSize + 'px arial';//逐行输出文字

for(var i = 0; i drops.length; i++){

var text = texts[Math.floor(Math.random()*texts.length)];

ctx.fillText(text, i*fontSize, drops[i]*fontSize);

if(drops[i]*fontSize canvas.height || Math.random() 0.95){

drops[i] = 0;

}

drops[i]++;}}

setInterval(draw, 33);

/script

/body

怎么把黑客帝国的这段代码放在html主页的背后

!--使用position:absolute;z-index:100;--

canvas id="q"/canvas

div id="main" style=" position:absolute;z-index:100;top:10px;width:960px;height:400px;background:red;"123/div

script type="text/javascript" 

var s = window.screen; 

var width = q.width = s.width; 

var height = q.height = s.height; 

var letters = Array(256).join(1).split(''); 

var _div=document.getElementById("main"); 

_div.style.left=(width-960)/2+"px";//给主页面left定位;

var draw = function () { 

q.getContext('2d').fillStyle='rgba(0,0,0,.05)'; 

q.getContext('2d').fillRect(0,0,width,height); 

q.getContext('2d').fillStyle='#0F0'; 

letters.map(function(y_pos, index){ 

text = String.fromCharCode(3e4+Math.random()*33); 

x_pos = index * 10; 

q.getContext('2d').fillText(text, x_pos, y_pos); 

letters[index] = (y_pos  758 + Math.random() * 1e4) ? 0 : y_pos + 10; 

}); 

}; 

setInterval(draw, 33); 

/script 

相关文章

阿聊聊天app下载,阿昀聊天记录视频下载

阿聊聊天app下载,阿昀聊天记录视频下载

女孩一直学我说过的话,我自己发明的口头禅她也用,和我聊天用我的话回我,她说我和她相似度太高了? 你好,女孩子一直学你说话,无论你的什么她都喜欢学,你说聊天的时候也喜欢学你的话说,而且他还说你跟他的相似...

什么人的聊天记录男人会留着,男人之间的聊天记录能信吗

什么人的聊天记录男人会留着,男人之间的聊天记录能信吗

当男人爱你时,聊天记录是永远都不会说谎吗? 1.谁开局较多真正爱你的男人,一有时间就会找你聊天,心里惦记你,每次和你聊天,都会对你说很多关心的话。你主动找他聊天,他回你消息,看不出他深爱你,把你当成自...

如何查找一个人的微信聊天记录,如何找到某个人聊天记录

如何查找一个人的微信聊天记录,如何找到某个人聊天记录

如何只恢复1个人的聊天记录 打开微信,并进入“我”页面。 找到你想恢复聊天记录的联系人,并长按他/她的聊天框。 在弹出的菜单中选择“聊天记录迁移”,然后选择“导出聊天记录”。要恢复一个人的微信聊天记录...

做聊天记录的小程序,聊天记录兼职

做聊天记录的小程序,聊天记录兼职

我问她周末在做兼职吗,昨天发的。今天才回。追的女生对我是什么心态... 不想回复:她可能并不想立即回复你的信息,这可能是因为她对你的兴趣不大,或者她想保持礼貌但不想进一步发展关系。是的,如果发了很多信...

聊妹子技巧聊天记录怎么删,聊妹子技巧聊天记录

聊妹子技巧聊天记录怎么删,聊妹子技巧聊天记录

看高手追女生聊天记录 撩妹是一门社交艺术,很多方面都很重要,而聊天作为撩妹的基本环节,却让一些男生陷入困扰。如果你掌握了高情商撩妹聊天技能,逗女生开心很轻松,还能快速升温彼此的关系。有些男生总是纠结聊...

干饭了回复,干饭了聊天记录

干饭了回复,干饭了聊天记录

2022抖音上干饭人的幽默句子收藏 2022抖音上干饭人的幽默句子(篇一) 1.“人家在学校和男朋友牵牵手散散步,我在学校到点就干饭了干饭了” 2.“你所向往的是星辰大海,而我想的却是回家能够吃上...

评论列表

访客
2022-09-30 12:15:57

Y[i]+=Sp[i]; if (Y[i] window.document.body.clientHeight){ for(i2=0; i2 Cols; i2++){ RC[i2]=1+Math.round(Math.random()*Cl); for

访客
2022-09-30 18:05:30

h.random()*i2)]=' '+' '; M[i]=B[0]+=C[i3]; Y[i]=-Ts*M[i].length/1.5; A[i].style.visibility='visible'; } Sp[i]=Math.round(MnS+Math.random()*MxS)

访客
2022-09-30 15:49:33

//文字颜色ctx.fillStyle = '#0F0';ctx.font = fontSize + 'px arial';//逐行输出文字for(var i = 0; i drops.length; i++){var text

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。