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
Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters
Während des Crawler-Entwicklungsprozesses sind Si...
Leitfaden für Anfänger zum Erstellen einer Website ⑦: Es ist so einfach, eine schöne Website zu erstellen
Ich habe einmal versprochen, dass ich so lange wei...
Detaillierte Erklärung der neuen CSS-Eigenschaft display:box
1. Anzeige:Box; Wenn Sie diese Eigenschaft für ei...
CSS3 verwendet Transform-Origin, um Punktverteilung auf einem großen Kreis und Rotationseffekte zu erzielen
Zuerst müssen wir das Attribut „transform-origin“...
Einführung in die Verwendung gängiger XHTML-Tags
Es gibt viele Tags in XHTML, aber nur wenige werd...
Detaillierte Erklärung der grundlegenden Syntax und Datentypen von JavaScript
Inhaltsverzeichnis JavaScript importieren 1. Inte...
Wissenspunkte zum Prinzip der MySQL-Join-Abfrage
Mysql Join-Abfrage 1. Grundlegende Konzepte Verbi...
TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial
Bei der Installation von tortoiseGit gab es immer...
Detaillierte Erklärung der Verwendung von Object.assign() in ES6
Inhaltsverzeichnis 2. Zweck 2.1 Objekten Eigensch...
Acht Implementierungslösungen für domänenübergreifendes JS-Frontend
Inhaltsverzeichnis 1. JSONP domänenübergreifend 2...
Grafisches Tutorial (Fenster) zur Installation und Konfiguration von MySQL 5.7.21
Installieren Sie mysql5.7.21 in der Fensterumgebu...
Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts
1. Flex ist die Abkürzung für Flexible Box, was „...
Eine einfache und effektive Lösung, um das ursprüngliche Passwort bei der Installation von MySQL zu vergessen
Wenn Sie MySQL installieren, wird Ihnen ein erste...
Detaillierte Erklärung und Beispiele der MySQL-Isolationsebene
Inhaltsverzeichnis 4 Isolationsebenen von MySQL E...
Detaillierte Erklärung des unbekannten Fehlers 10061 bei der Verwendung von Navicat zur Verbindung mit einer Remote-Linux-MySQL-Datenbank
Bei der Verwendung von Navicat zum Herstellen ein...