JavaScript canvas to achieve code rain effect

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

Recommend

Troubleshooting the reasons why MySQL deleted records do not take effect

A record of an online MySQL transaction problem L...

Detailed tutorial on building a continuous integration delivery environment based on Docker+K8S+GitLab/SVN+Jenkins+Harbor

Table of contents Environment Setup Overview 1.Wh...

MySQL query redundant indexes and unused index operations

MySQL 5.7 and above versions provide direct query...

Detailed explanation of the use of React.cloneElement

Table of contents The role of cloneElement Usage ...

Use non-root users to execute script operations in docker containers

After the application is containerized, when the ...

Implementation of nginx worker process loop

After the worker process is started, it will firs...

Vue3 encapsulates its own paging component

This article example shares the specific code of ...

Sample code for making desktop applications with vue + Electron

1.vue packaging Here we use the vue native packag...

Deploy Confluence with Docker

1. Environmental requirements 1. Docker 17 and ab...

Analysis of the implementation principle of Vue instructions

Table of contents 1. Basic Use 2. Working Princip...

Two ways to visualize ClickHouse data using Apache Superset

Apache Superset is a powerful BI tool that provid...

Understand the implementation of Nginx location matching in one article

Since the team is separating the front-end and ba...

CSS3 achieves cool 3D rotation perspective effect

CSS3 achieves cool 3D rotation perspective 3D ani...

MySQL 5.7.10 installation and configuration tutorial under Windows

MySQL provides two different versions for differe...

Detailed explanation of using new methods of html5 to manipulate element class names in JavaScript

Table of contents 1. classList attribute 2. Pract...