JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
程序员文章站
2022-07-06 17:34:18
先看看js+css+html实现“代码雨”类似黑客帝国文字下落最终效果：html代码：
先看看js+css+html实现“代码雨”类似黑客帝国文字下落最终效果：
html代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofollow" > <title>code by-zhenyu.sha</title> </head> <body> <canvas id="canvas"></canvas> </body> <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <script src="http://neilcarpenter.com/demos/canvas/matrix/stats.min.js"></script> <script type="text/javascript" src="js/ok.js"></script> </html>
js代码：
(function() {
var lasttime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestanimationframe; ++x) {
window.requestanimationframe = window[vendors[x] + 'requestanimationframe'];
window.cancelanimationframe = window[vendors[x] + 'cancelanimationframe'] ||
window[vendors[x] + 'cancelrequestanimationframe'];
}
if (!window.requestanimationframe)
window.requestanimationframe = function(callback, element) {
var currtime = new date().gettime();
var timetocall = math.max(0, 16 - (currtime - lasttime));
var id = window.settimeout(function() {
callback(currtime + timetocall);
},
timetocall);
lasttime = currtime + timetocall;
return id;
};
if (!window.cancelanimationframe)
window.cancelanimationframe = function(id) {
cleartimeout(id);
};
}());
// stats
var stats = new stats();
stats.setmode(0);
stats.domelement.style.position = 'absolute';
stats.domelement.style.left = '0px';
stats.domelement.style.top = '0px';
document.body.appendchild(stats.domelement);
var m = {
settings: {
col_width: 20,
col_height: 25,
velocity_params: {
min: 4,
max: 8
},
code_length_params: {
min: 20,
max: 40
}
},
animation: null,
c: null,
ctx: null,
linec: null,
ctx2: null,
width: window.innerwidth,
height: window.innerheight,
columns: null,
canvii: [],
font: '30px matrix-code',
letters: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '$', '+', '-', '*', '/', '=', '%', '"', '\'', '#', '&', '_', '(', ')', ',', '.', ';', ':', '?', '!', '\\', '|', '{', '}', '<', '>', '[', ']', '^', '~'],
codes: [],
createcodeloop: null,
codescounter: 0,
init: function() {
m.c = document.getelementbyid('canvas');
m.ctx = m.c.getcontext('2d');
m.c.width = m.width;
m.c.height = m.height;
m.ctx.shadowblur = 0;
m.ctx.fillstyle = '#000';
m.ctx.fillrect(0, 0, m.width, m.height);
m.ctx.font = m.font;
m.columns = math.ceil(m.width / m.settings.col_width);
for (var i = 0; i < m.columns; i++) {
m.codes[i] = [];
m.codes[i][0] = {
'open': true,
'position': {
'x': 0,
'y': 0
},
'strength': 0
};
}
m.loop();
m.createlines();
m.createcode();
// not doing this, kills cpu
// m.swapcharacters();
window.onresize = function() {
window.cancelanimationframe(m.animation);
m.animation = null;
m.ctx.clearrect(0, 0, m.width, m.height);
m.codescounter = 0;
m.ctx2.clearrect(0, 0, m.width, m.height);
m.width = window.innerwidth;
m.height = window.innerheight;
m.init();
};
},
loop: function() {
m.animation = requestanimationframe(function() {
m.loop();
});
m.draw();
stats.update();
},
draw: function() {
var velocity, height, x, y, c, ctx;
// slow fade bg colour
m.ctx.shadowcolor = 'rgba(0, 0, 0, 0.5)';
m.ctx.fillstyle = 'rgba(0, 0, 0, 0.5)';
m.ctx.fillrect(0, 0, m.width, m.height);
m.ctx.globalcompositeoperation = 'source-over';
for (var i = 0; i < m.columns; i++) {
// check member of array isn't undefined at this point
if (m.codes[i][0].canvas) {
velocity = m.codes[i][0].velocity;
height = m.codes[i][0].canvas.height;
x = m.codes[i][0].position.x;
y = m.codes[i][0].position.y - height;
c = m.codes[i][0].canvas;
ctx = c.getcontext('2d');
m.ctx.drawimage(c, x, y, m.settings.col_width, height);
if ((m.codes[i][0].position.y - height) < m.height) {
m.codes[i][0].position.y += velocity;
} else {
m.codes[i][0].position.y = 0;
}
}
}
},
createcode: function() {
if (m.codescounter > m.columns) {
cleartimeout(m.createcodeloop);
return;
}
var randominterval = m.randomfrominterval(0, 100);
var column = m.assigncolumn();
if (column) {
var codelength = m.randomfrominterval(m.settings.code_length_params.min, m.settings.code_length_params.max);
var codevelocity = (math.random() * (m.settings.velocity_params.max - m.settings.velocity_params.min)) + m.settings.velocity_params.min;
var letterslength = m.letters.length;
m.codes[column][0].position = {
'x': (column * m.settings.col_width),
'y': 0
};
m.codes[column][0].velocity = codevelocity;
m.codes[column][0].strength = m.codes[column][0].velocity / m.settings.velocity_params.max;
for (var i = 1; i <= codelength; i++) {
var newletter = m.randomfrominterval(0, (letterslength - 1));
m.codes[column][i] = m.letters[newletter];
}
m.createcanvii(column);
m.codescounter++;
}
m.createcodeloop = settimeout(m.createcode, randominterval);
},
createcanvii: function(i) {
var codelen = m.codes[i].length - 1;
var canvheight = codelen * m.settings.col_height;
var velocity = m.codes[i][0].velocity;
var strength = m.codes[i][0].strength;
var text, fadestrength;
var newcanv = document.createelement('canvas');
var newctx = newcanv.getcontext('2d');
newcanv.width = m.settings.col_width;
newcanv.height = canvheight;
for (var j = 1; j < codelen; j++) {
text = m.codes[i][j];
newctx.globalcompositeoperation = 'source-over';
newctx.font = '30px matrix-code';
if (j < 5) {
newctx.shadowcolor = 'hsl(104, 79%, 74%)';
newctx.shadowoffsetx = 0;
newctx.shadowoffsety = 0;
newctx.shadowblur = 10;
newctx.fillstyle = 'hsla(104, 79%, ' + (100 - (j * 5)) + '%, ' + strength + ')';
} else if (j > (codelen - 4)) {
fadestrength = j / codelen;
fadestrength = 1 - fadestrength;
newctx.shadowoffsetx = 0;
newctx.shadowoffsety = 0;
newctx.shadowblur = 0;
newctx.fillstyle = 'hsla(104, 79%, 74%, ' + (fadestrength + 0.3) + ')';
} else {
newctx.shadowoffsetx = 0;
newctx.shadowoffsety = 0;
newctx.shadowblur = 0;
newctx.fillstyle = 'hsla(104, 79%, 74%, ' + strength + ')';
}
newctx.filltext(text, 0, (canvheight - (j * m.settings.col_height)));
}
m.codes[i][0].canvas = newcanv;
},
swapcharacters: function() {
var randomcodeindex;
var randomcode;
var randomcodelen;
var randomcharindex;
var newrandomcharindex;
var newrandomchar;
for (var i = 0; i < 20; i++) {
randomcodeindex = m.randomfrominterval(0, (m.codes.length - 1));
randomcode = m.codes[randomcodeindex];
randomcodelen = randomcode.length;
randomcharindex = m.randomfrominterval(2, (randomcodelen - 1));
newrandomcharindex = m.randomfrominterval(0, (m.letters.length - 1));
newrandomchar = m.letters[newrandomcharindex];
randomcode[randomcharindex] = newrandomchar;
}
m.swapcharacters();
},
createlines: function() {
m.linesc = document.createelement('canvas');
m.linesc.width = m.width;
m.linesc.height = m.height;
m.linesc.style.position = 'absolute';
m.linesc.style.top = 0;
m.linesc.style.left = 0;
m.linesc.style.zindex = 10;
document.body.appendchild(m.linesc);
var linesyblack = 0;
var linesywhite = 0;
m.ctx2 = m.linesc.getcontext('2d');
m.ctx2.beginpath();
m.ctx2.linewidth = 1;
m.ctx2.strokestyle = 'rgba(0, 0, 0, 0.7)';
while (linesyblack < m.height) {
m.ctx2.moveto(0, linesyblack);
m.ctx2.lineto(m.width, linesyblack);
linesyblack += 5;
}
m.ctx2.linewidth = 0.15;
m.ctx2.strokestyle = 'rgba(255, 255, 255, 0.7)';
while (linesywhite < m.height) {
m.ctx2.moveto(0, linesywhite + 1);
m.ctx2.lineto(m.width, linesywhite + 1);
linesywhite += 5;
}
m.ctx2.stroke();
},
assigncolumn: function() {
var randomcolumn = m.randomfrominterval(0, (m.columns - 1));
if (m.codes[randomcolumn][0].open) {
m.codes[randomcolumn][0].open = false;
} else {
return false;
}
return randomcolumn;
},
randomfrominterval: function(from, to) {
return math.floor(math.random() * (to - from + 1) + from);
},
snapshot: function() {
window.open(m.c.todataurl());
}
};
function eventlistenerz() {
var controltoggles = document.getelementsbyclassname('toggle-info');
var controls = document.getelementbyid('info');
var snapshotbtn = document.getelementbyid('snapshot');
function togglecontrols(e) {
e.preventdefault();
controls.classname = controls.classname === 'closed' ? '' : 'closed';
}
for (var j = 0; j < 2; j++) {
controltoggles[j].addeventlistener('click', togglecontrols, false);
}
snapshotbtn.addeventlistener('click', m.snapshot, false);
}
window.onload = function() {
m.init();
eventlistenerz();
};
css代码：
@import url("http://fonts.googleapis.com/css?family=carrois+gothic");
@font-face {
font-family: 'matrix-code';
src: url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.eot?#iefix') format('embedded-opentype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.woff') format('woff'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.ttf') format('truetype'), url('http://neilcarpenter.com/demos/canvas/matrix/font/matrix-code.svg#svgfontname') format('svg');
}
html,
body {
-webkit-font-smoothing: antialiased;
font: normal 12px/14px "carrois gothic", sans-serif;
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background: black;
}
#stats {
z-index: 100;
}
#info {
background: rgba(0, 0, 0, 0.7);
position: fixed;
bottom: 0;
left: 0px;
width: 250px;
padding: 10px 20px 20px;
z-index: 100;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: -webkit-transform .5s ease-in-out;
-moz-transition: -moz-transform .5s ease-in-out;
-o-transition: -o-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
}
#info.closed {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.toggle-info {
position: absolute;
display: block;
height: 10px;
background: rgba(0, 0, 0, 0.8);
width: 290px;
left: 0;
text-align: center;
padding: 3px 0 7px;
text-decoration: none;
color: white;
text-shadow: none;
}
.toggle-info:hover {
background: rgb(0, 0, 0);
}
#close {
top: -20px;
}
#open {
bottom: -20px;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
button {
background: rgba(255, 255, 255, 0.2);
color: #fff;
border: 0;
border-radius: 2px;
padding: 7px 10px;
box-shadow: 0 0 3px 0px rgba(255, 255, 255, 0.3);
cursor: pointer;
}
button:hover {
background: rgba(255, 255, 255, 0.1);
}
pa {
color: #fff;
}
pa:hover {
color: #effdeb;
text-shadow: 0px 0px 5px #75ad61;
}
本文介绍了使用js+css+html实现“代码雨”类似黑客帝国文字下落效果的代码实例，更多js特效请查看下面的相关链接
上一篇： 袁绍与曹操交战时，谋士沮授有过哪些计谋？