js+canvas realisiert Code-Regeneffekt

In diesem Artikel wird der spezifische Code des js+canvas-Code-Regeneffekts zu Ihrer Information freigegeben. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8" />
  <Titel></Titel>
  <style type="text/css">
   *{
    Rand: 0px;
    Polsterung: 0px;
   }
   html,Text{
    Höhe: 100%;
    Breite: 100 %;
   }
   #Leinwand{
    Anzeige: Block;
   }
  </Stil>
 </Kopf>
 <Text>
  <Leinwand-ID="Leinwand"></Leinwand>
  <Skripttyp="text/javascript">
   var Leinwand = document.getElementById('Leinwand')
   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 = Funktion(){
    dies.x = Math.random()*cw
    dies.y = 0
    dieser.Inhalt1 = Mathe.random()*15 
    diese.Geschwindigkeit = Math.random()*5+20
    dies.add = funktion(){
     dies.y+=diese.Geschwindigkeit
    }
    dies.reset1 = Funktion(){
     dies.x = Math.random()*cw
     dies.y = 0
    }
   }
   //Definiere eine zufällige Farbe var gl = c.createLinearGradient(0, 0, cw, ch);
       gl.addColorStop(0, 'rot');
       
       gl.addColorStop(.5, 'gelb');
       
       gl.addColorStop(1, 'cyan');
   
   var arr = []
   für(var i=0;i<20;i++){
    arr.push(neuer init())
   }
   setzeIntervall(Funktion(){
    
    c.fillStyle = "rgba(0,0,0,0,0,05)"
    c.fillRect(0,0,cw,ch)
    //Die beiden obigen Sätze geben einen Hintergrund an. Setzen Sie einen Timer ein, sodass er bei jedem Ausführen einmal neu gezeichnet wird. //Wird verwendet, um die Leinwand zu löschen. //1. Die Farbe von rgba () soll Transparenz verleihen. Die neu gezeichnete Leinwand bedeckt die vorherige Leinwand nicht vollständig, sodass ein Farbverlaufseffekt auftritt. for(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)
     
     //Lass ihn auf den Boden fallen und zurückkommen, wenn (arr[i].y>ch-20) {
      arr[i].reset1()
     }
     arr[i].add()
    }
    
    
    //
   },1000/60)
  </Skript>
 </body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JavaScript zum Erreichen des Code-Rain-Effekts
JavaScript-Canvas zum Erzielen eines Code-Rain-Effekts
JS+CSS+HTML realisiert „Coderegen“, ähnlich dem fallenden Effekt von Text in The Matrix
HTML+JS realisiert den Quellcode des „Code Rain“-Effekts (den Matrix-Textfalleffekt)
JS realisiert Code-Regen-Spezialeffekte

<<: Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)

>>: MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank