JavaScript canvas to achieve code rain effect

This article shares the specific code for canvas to achieve the code rain effect for your reference. The specific content is as follows

First look at the effect picture

Doesn’t this rendering look very much like the hacking technology in old movies? It looks quite difficult, but it is actually quite simple to operate.

Canvas actually means canvas. First we need a canvas

<body>
    <canvas id="canvas"></canvas>
</body>

Let’s set up a background like this

HTML Part

<body>
    <canvas id="canvas"></canvas>
    <div></div>
</body>

CSS Part

<style>
        *{
            margin: 0;
            padding: 0;
        }
        #canvas{
            overflow: hidden;
            position: absolute;
            z-index: 1;
        }
        div{
            width: 480px;
            height: 280px;
            border-radius: 50%;
            background-image: url(img/eighthdaymaterial.jpg);
            position: absolute;
            top: calc(50% - 140px);
            left: calc(50% - 240px);
            z-index: 2;
            opacity: 0.4;
        }
</style>

The following is the JS part, a canvas, a brush, and a width and height for the canvas.

<script>
 var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
</script>

The detailed code is as follows:

<script>
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var width = window.innerWidth;
    var height = window.innerHeight;
    canvas.height = height;
    canvas.width = width;
    //Set a font size variable var fontsize = 16;
    //Set a variable to store how many characters a line can hold at the same time var count = width/fontsize;
    console.log(count);
    //Create an array to store words var arr = [];
    for(var i = 0; i < count; i++){
        arr.push(0);
        console.log(arr);
    }
    //Store data in an array var stringarr = "I Love You"
    function show(){
    //Start drawingcontext.beginPath();
        context.fillRect(0,0,width,height);
        //Transparencycontext.fillStyle = "rgba(0,0,0,0.05)";
        //Font color context.strokeStyle = "chartreuse";
        for(
            var i =0;
            i<arr.length;
            i++
        )
        {
            var x = i*fontsize;
            var y = arr[i]*fontsize;
            var index = Math.floor(Math.random()*stringarr.length);
            context.strokeText(stringarr[index],x,y);
            if(
                y >=height&&Math.random()>0.99
            ){
                arr[i]=0;
            }
            arr[i]++;
        }
        context.closePath();
    }
    show(); //Call function var timer = setInterval(show,30);
</script>

If there are any deficiencies, please provide more guidance.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript to achieve code rain effect
js+canvas realizes code rain effect
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 code rain special effects

<<: GDB debugging MySQL actual combat source code compilation and installation

>>: Graphic tutorial on installing CentOS7 on VMware 15.5