Share JS four fun hacker background effect codes

Example 1
Example 2
Example 3
Example 4

Example 1

<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>
        /*
            ① Use setInterval(draw, 33) to set the refresh interval ② Use String.fromCharCode(1e2+Math.random()*33) to randomly generate letters ③ Use ctx.fillStyle='rgba(0,0,0,.05)'; ctx.fillRect(0,0,width,height); ctx.fillStyle='#0F0′; to repeatedly generate a semi-transparent black background with an opacity of 0.5 ④ Use x = (index * 10)+10; and yPositions[index] = y + 10; to sequentially determine the position of the displayed letters ⑤ Use fillText(text, x, y); to display a letter at the specified position. Repeating the above steps will produce the title effect of "The Matrix".
        */
        $(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>

Example 2

<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('');
            /*
                The join() method is used to put all the elements in an array into a string. The split() method is used to split a string into a string array*/
            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) {
                    /*
                        map() passes each element through the function to the current matching set, generating a new jQuery object containing the return value*/
                    x = (index * 10);
                    ctx.fillText(parseInt(Math.random() * 10), x, y);
                    /*
                        Generate an 'a' character at the (x,y) coordinate position with index being the subscript of Ypositions*/
                    if (y > 500) {
                        YPositions[index] = 0;
                    } else {
                        YPositions[index] = y + 10;
                    }
                    /*
                        If the newly generated character has reached the end of <canvas>, then the position of the next new character is returned to the origin*/
                });
            };
            setInterval(draw, 30);
        </script>
</body>
</html>

Example 3

<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;">
            <!-- The <canvas> tag is not supported in browsers below 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 c2 = document.getElementById("myCanvasMatrix");
            var ctx2 = c2.getContext("2d");
            Where 'ctx2' is equivalent to the following 'ctx1'
        */
        var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
        /*
            $("").get(0) means getting the internal DOM object reference, that is, after getting the DOM object of the object, you can use the corresponding DOM API
        */
        /*
            The getContext() method returns an environment for drawing on the canvas.
            Canvas.getContext(contextID);
            The only legal value of the contextID parameter is '2d', which means that 2D drawing is supported. '3d' may be supported in the future.
        */
        var Matrix = function(){
            /*
                var my_gradient = ctx1.createLinearGradient(0,0,0,170);
                my_gradient.addColorStop(0,"black");
                my_gradient.addColorStop(1,"white");
                ctx1.fillStyle=my_gradient;
            */
            ctx1.fillStyle = 'rgba(0,0,0,.07)';
            /*
                The fillStyle property sets or returns the color, gradient, or pattern used to fill a painting.
                rgba(R,G,B,A)
                where '.05' represents alpha transparency*/
            ctx1.fillRect(0,0,500,500);
            /*
                The fillRect() method fills the specified rectangle with the color, gradient, and pattern specified by the fillStyle attribute.
            ctx1.fillStyle = "#0f0";
            ctx1.fillText('zhengbin', Math.random()*(500), Math.random()*(500));
            ctx1.fillText('cnblogs', Math.random()*(500), Math.random()*(500));
            /*
                The principle is to continuously generate new transparent backgrounds and content to be displayed.
                In this way, the new background keeps covering the old display content, and the new content stands out*/
        };
        runFun();
        var id;
        function stopFun(){
            clearInterval(id);
        }
        function runFun(){
            id = setInterval(Matrix,50);
        /*
           setInterval() definition and usage:
           The setInterval() method calls a function or evaluates an expression at a specified period (in milliseconds).
           The setInterval() method will call the function repeatedly until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as a parameter to the clearInterval() method.
        */
        }
        $("button#puse").click(function() {
            stopFun();
        });
        $("button#run").click(function() {
            runFun();
        });
    });
    </script>
</body>
</html>

Example 4

<!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>

 References

https://www.cnblogs.com/fenger-VIP/p/7651562.html

This concludes this article about sharing four interesting hacker background effect JS codes. For more related hacker background effect JS code content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

JS canvas dynamically realizes the background effect of The Matrix
JS+CSS+HTML realizes "code rain" similar to the falling effect of text in The Matrix
HTML+JS realizes the source code of "code rain" effect (the Matrix text falling effect)
JS realizes the effect of text falling in The Matrix
js imitates the Matrix letter drop effect code sharing

<<: SQL implements LeetCode (180. Continuous numbers)

>>: Pure CSS to achieve the text icon function by taking the first character of the string