黑客帝国背景样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#matrixBG{
position: fixed;
top:0;
left: 0;
z-index: -1;
opacity:0.8;
}
</style>
</head>
<body>
<div id="page_end_html">
<div><canvas id="matrixBG" ></canvas></div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.js"></script>
<script >
// JavaScript Document
$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');
var fonts1 = "可ㄅㄆㄇㄈㄪㄉㄊㄋㄌㄍㄎ艹ㄫㄏㄐㄑㄬㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟ大ㄠㄡㄢㄣㄤㄥㄦㄧㄨㄩ";
var fonts2 = "钅彡圭卌廾爫丷糹川忄冖辶弋刂冫灬祭豕";
var fonts = fonts1 + fonts2;
//var fonts="12345AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz67890";
//console.log( fonts );
var draw = function () {
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,width,height);
ctx.fillStyle='#0F0';
ctx.font = '10pt Georgia';
// ctx.font = '10pt Nano';
yPositions.map(function(y, index){
// text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
var rand = Math.floor( Math.random()* fonts.length );
var text = fonts.substr( rand, 1);
x = (index * 10)+10;
matrixBG.getContext('2d').fillText(text, x, y);
if(y > 100 + Math.random()*1e4)
{
yPositions[index]=0;
}
else
{
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix()
{
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});
</script>
</body>
</html>
完整代码
CSS代码:
/*黑客帝国背景CSS样式*/
#matrixBG{
position: fixed;
top:0;
left: 0;
z-index: -1;
opacity:0.8;
}
HTML部分
建议写在首页HTML代码栏中
(PS:js部分需要jquery-1.11.0.js支持)
/*黑客帝国背景HTML*/
<div id="page_end_html">
<div><canvas id="matrixBG" ></canvas></div>
</div>
/*黑客帝国JS样式*/
<script >
// JavaScript Document
$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');
var fonts1 = "可ㄅㄆㄇㄈㄪㄉㄊㄋㄌㄍㄎ艹ㄫㄏㄐㄑㄬㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟ大ㄠㄡㄢㄣㄤㄥㄦㄧㄨㄩ";
var fonts2 = "钅彡圭卌廾爫丷糹川忄冖辶弋刂冫灬祭豕";
var fonts = fonts1 + fonts2;
//var fonts="12345AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz67890";
//console.log( fonts );
var draw = function () {
ctx.fillStyle='rgba(0,0,0,.05)';
ctx.fillRect(0,0,width,height);
ctx.fillStyle='#0F0';
ctx.font = '10pt Georgia';
// ctx.font = '10pt Nano';
yPositions.map(function(y, index){
// text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
var rand = Math.floor( Math.random()* fonts.length );
var text = fonts.substr( rand, 1);
x = (index * 10)+10;
matrixBG.getContext('2d').fillText(text, x, y);
if(y > 100 + Math.random()*1e4)
{
yPositions[index]=0;
}
else
{
yPositions[index] = y + 10;
}
});
};
RunMatrix();
function RunMatrix()
{
if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});
</script>