侧边栏

博客园___黑客帝国背景样式

黑客帝国背景样式

<!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>
posted @ 2020-08-12 18:49  菜鸟-传奇  阅读(468)  评论(0)  编辑  收藏  举报