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:
|
<<: Das schnellste Textsuchtool von Linux: ripgrep (die beste Alternative zu grep)
Artikel empfehlen
Implementierung der Bereitstellung des Apollo-Konfigurationscenters mithilfe von Docker in CentOS7
Apollo Open Source-Adresse: https://github.com/ct...
So konfigurieren Sie Nginx, um zwischen dem PC- oder Mobiltelefonzugriff auf verschiedene Domänennamen zu unterscheiden
Die neue offizielle Website ist online, aber die ...
Zusammenfassung der Wissenspunkte des Nodejs-Clustermoduls und Anwendungsbeispiele
Der Interviewer wird Sie manchmal fragen: „Sagen ...
Grundlegende Konzepte und Anwendungsbeispiele für HTML-Inline-Elemente und Block-Level-Elemente
Es gibt zwei Arten von HTML-Tags: Inline-Elemente...
Drei Möglichkeiten, das horizontale Div-Layout auf beiden Seiten auszurichten
In diesem Artikel werden hauptsächlich drei Metho...
So stellen Sie mit VScode in einer Windows-Umgebung eine Verbindung zur virtuellen MySQL-Maschine her
1. Seite der virtuellen Maschine 1. Suchen Sie di...
Lösung zum automatischen Neustart von MySQL
Vorwort Kürzlich trat in der Testumgebung ein Pro...
Beschreiben Sie kurz den Unterschied zwischen MySQL und Oracle
1. Oracle ist eine große Datenbank, während MySQL...
Implementierung von MySQL-indexbasierten Stresstests
1. Datenbankdaten simulieren 1-1 Datenbank- und T...
Zusammenfassung gängiger Befehle für Ubuntu-Server
Die meisten der folgenden Befehle müssen in der K...
Beheben Sie das Problem, dass das Elementbearbeitungsformular el-radio nach dem Echo nicht ausgewählt werden kann
Inhaltsverzeichnis Vorwort Frage Online-Lösungen ...
Vue implementiert die Produktregisterkarte der Produktdetailseitenfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Ausführliche Erklärung der Umgebungsvariablen und Konfigurationsdateien in CentOS
Vorwort Das Konfigurationsdateisystem der CentOS-...
Der Unterschied und die Verwendung von einzeiligem und zweizeiligem Layout im Flex-Mobillayout
Hier ist ein einzeiliges Layout mit ul>li für ...
Anweisungen zum Erlernen von Vue
Inhaltsverzeichnis 1. v-Text (v-Befehlsname = „Va...