js+canvas realizes code rain effect

This article shares the specific code of js+canvas code rain effect for your reference. The specific content is as follows

Code:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   *{
    margin: 0px;
    padding: 0px;
   }
   html,body{
    height: 100%;
    width: 100%;
   }
   #canvas{
    display: block;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas"></canvas>
  <script type="text/javascript">
   var canvas = document.getElementById('canvas')
   var c = canvas.getContext('2d')
   var cw = canvas.width = window.innerWidth
   var ch = canvas.height = window.innerHeight 
   
   var str = [1,2,3,4,5,6,7,8,9,0,'q','w','e','r','t','y','u','i','a','c','d','f','g','h','j','l']
   var init = function(){
    this.x = Math.random()*cw
    this.y = 0
    this.content1 =Math.random()*15 
    this.speed = Math.random()*5+20
    this.add = function(){
     this.y+=this.speed
    }
    this.reset1 = function(){
     this.x = Math.random()*cw
     this.y = 0
    }
   }
   //Define a random color var gl = c.createLinearGradient(0, 0, cw, ch);
       gl.addColorStop(0, 'red');
       
       gl.addColorStop(.5, 'yellow');
       
       gl.addColorStop(1, 'cyan');
   
   var arr = []
   for(var i=0;i<20;i++){
    arr.push(new init())
   }
   setInterval(function(){
    
    c.fillStyle = 'rgba(0,0,0,0.05)'
    c.fillRect(0,0,cw,ch)
    //The above two sentences are to give a background, put in the timer so that each time it runs, it will be repainted once//used to clear the canvas//1, yong rgba() to indicate the color is to give a transparency, the newly drawn canvas does not completely cover the previous canvas, so there is a gradient effectfor(var i=0;i<arr.length;i++){
     c.fillStyle = gl
     c.font = '30px Microsoft YaHei'
     
     c.fillText(str[i],arr[i].x,arr[i].y)
     
     //Let him fall to the bottom and come back if (arr[i].y>ch-20) {
      arr[i].reset1()
     }
     arr[i].add()
    }
    
    
    //
   },1000/60)
  </script>
 </body>
</html>

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
JavaScript canvas to achieve 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

<<: MySQL Binlog Data Recovery: Detailed Explanation of Accidentally Deleting a Database

>>: Installation steps of docker-ce on Raspberry Pi 4b ubuntu19 server