黑客帝国背景代码实现

黑客帝国背景样式

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>