分享JS四种好玩的黑客背景效果代码

2024-04-02 19:04:59 355人浏览安东尼

摘要

目录示例一示例二示例三示例四示例一 <html> <head> <title>The Matrix</title>

示例一


<html>
<head>
    <title>The Matrix</title>
    <script src="Http://ajax.Googleapis.com/ajax/libs/Jquery/1.7.1/jquery.min.js"
            type="text/javascript"></script>
    <meta charset="utf-8">
    <script>
        
        $(document).ready(function () {
            var s = window.screen;
            var width = q.width = s.width;
            var height = q.height;
            var yPositions = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = 'red';
                ctx.font = '10pt Georgia';
                yPositions.map(function (y, index) {
                    text = String.fromCharCode(1e2 + Math.random() * 33);
                    x = (index * 10) + 10;
                    q.getContext('2d').fillText(text, x, y);
                    if (y > Math.random() * 1e4) {
                        yPositions[index] = 0;
                    } else {
                        yPositions[index] = y + 10;
                    }
                });
            };
            RunMatrix();
            function RunMatrix() {
                Game_Interval = setInterval(draw, 30);
            }
        });
    </script>
</head>
<body>
    <div align="center">
        <canvas id="q" width="500" height="500"></canvas>
    </div>
</body>
</html>

示例二


<html>
<head>
 
    <title>Do You Know HACKER-2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
            type="text/javascript"></script>
</head>
 
<body>
    <div align="center">
        <canvas id="myCanvas" width="1024" height="800" style="border:1px solid #c3c3c3;">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
        <script type="text/javascript">
            var YPositions = Array(51).join(0).split('');
            
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, 1024, 800); ctx.fillStyle = "#0f0";
                YPositions.map(function (y, index) {
                    
                    x = (index * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    
                    if (y > 500) {
                        YPositions[index] = 0;
                    } else {
                        YPositions[index] = y + 10;
                    }
                    
                });
            };
            setInterval(draw, 30);
        </script>
</body>
</html>

示例三


<html>
<head>
 
    <title>Do You Know HACKER-1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
 
<body>
    <div align="center">
        <canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;">
            <!-- <canvas>标签在IE9以下的浏览器中并不被支持 -->
            Please Upgrade your browser
        </canvas>
        <br>
        <button type="button" id="puse">puse</button>
        <button type="button" id="run">run</button>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
        
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        
        
        var Matrix=function(){
            
            ctx1.fillStyle = 'rgba(0,0,0,.07)';
            
            ctx1.fillRect(0,0,500,500);
            
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            
        };
        runFun();
        var id;
        function stopFun(){
            clearInterval(id);
        }
        function runFun(){
            id = setInterval(Matrix,50);
        
        }
        $("button#puse").click(function() {
            stopFun();
        });
        $("button#run").click(function() {
            runFun();
        });
    });
    </script>
</body>
</html>

示例四


<!DOCTYPE html>
 
<html>
 
<head>
 
<meta charset="utf-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-Scalable=no">
 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
 
</head>
 
<body>
 
<canvas id="content" width="1250px" height="602px"></canvas>
 
</body>
 
</html>
 
<script>
 
  var cav = document.getElementById('content');
 
  var w = window.screen.width;
 
  var h = window.screen.height;
 
  var yPositions = Array(300).join(0).split('');
 
  var ctx = cav.getContext('2d');
 
  var draw = function(){
 
 
 
    ctx.fillStyle = 'rgba(0,0,0,.05)';
 
    ctx.fillRect(0,0,w,h);
 
    ctx.fillStyle = 'green';
 
    ctx.font = '20px';
 
 
 
    yPositions.map(function(y,index){
 
      text = String.fromCharCode(1e2+Math.random()*330);
 
      x = index*10;
 
      cav.getContext('2d').fillText(text,x,y);
 
      if(y>Math.random()*1e4){
 
        yPositions[index]=0;
 
      }else{
 
        yPositions[index]=y+10;
 
      }
 
    });
 
 
 
  }
 
  setInterval('draw()',30);
 
</script>