js Canvas realisiert zufällige Partikeleffekte
|
In diesem Artikelbeispiel wird der spezifische Code der zufälligen Partikeleffekte von JS Canvas zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Vorwort Canvas realisiert Front-End-Spezialeffektkunst Ergebnisse
Code html
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
</Kopf>
<Text>
<script src="./main.js"></script>
</body>
</html>Haupt-JS
/*
*Partikelklassenstruktur* Klassenfunktion:
*1. Initialisierung. Erstellen Sie eine Leinwand, geben Sie Partikeleigenschaften an usw.;
*2. Bild erstellen und zeichnen *3. Flächenfarbe festlegen *4. Partikelbewegung und Ablenkwinkel */
// Partikel erzeugen let Particle = function(context, options){
lass random = Math.random();
dieser.Kontext = Kontext;
// Die x-Koordinate im Canvas this.x = options.x;
// y-Koordinate auf der Leinwand this.y = options.y;
// Nimm die Hälfte der Zufallszahl und vergrößere den Winkel zufällig this.s = 0.5 + Math.random();
// dies.s = 1 + Math.random();
// Der sich ändernde Winkel der Partikelbewegung this.a = 0;
//Breite this.w = window.innerWidth;
// Höhe this.h = window.innerHeight;
// Radius dieser.radius = options.radius || 0,5 + Math.random() * 10;
// Farbe diese.Farbe = Optionen.Farbe || "#E5483F";
// konsole.log(diese.farbe);
//Geben Sie an, dass nach 3 Sekunden angerufen werden soll.
// Wenn der Partikelradius größer als 0,5 ist, neue Partikel hinzufügen.
setzeTimeout(Funktion(){
wenn (dieser.radius > 0,5) {
Partikel.push(
neues Partikel(Kontext, {
x: dies.x,
y: dies.y,
Farbe: dieser.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",
Radius: dieser.radius / 2.2 })
);
}
}.call(Partikel), 3000);
};
// Bild rendern Particle.prototype.render = function() {
//Starte einen neuen Pfad von (0,0);
dieser.Kontext.beginPath();
// Erstellen Sie einen Kurvenbogen this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
// Linienbreite zeichnen this.context.lineWidth = 2;
//Farbfüllung this.context.fillStyle = this.color;
// Den Pfad des aktuellen Bildes füllen this.context.fill();
// Kehren Sie zum Ausgangspunkt zurück und zeichnen Sie die Linie zur Ausgangsposition this.context.closePath();
};
Partikel.prototype.swapColor = Funktion() {
// Weiß ausschließen if (this.color != "#FFFFFF") {
// Bestimmen Sie die linke und rechte Schnittstelle und weisen Sie Farbwerte zu, wenn (this.x < this.w / 2) {
// Linke Hälfte this.color = "#36fcfa";
} anders {
// Rechte Hälfte this.color = "#E5483F";
}
}
};
Partikel.prototyp.bewegen = Funktion() {
// Farbdefinition this.swapColor();
// Die horizontale Achse wird entsprechend dem Kosinuswinkel transformiert und mit einer Zufallszahl verstärkt;
// Ablenkwinkel, sodass die beiden Halbgrenzen getrennt sind this.x += Math.cos(this.a) * this.s;
dies.y += Math.sin(dieses.a) * dies.s;
// dies.y += Math.cos(dieses.a) * dies.s;
// dies.x += Math.sin(dieses.a) * dies.s;
// Nach der Änderung den zufälligen Winkel erneut einnehmen;
dies.a += Math.random() * 0,8 - 0,4;
// Wenn alle 0 sind, bewegt sich die horizontale Koordinate des Partikels nicht;
wenn (dieses.x < 0 || dieses.x > dieses.w - dieser.radius) {
gibt false zurück;
}
// Die Ordinate des Partikels bewegt sich nicht;
wenn (dieses.y < 0 || dieses.y > dieses.h - dieser.radius) {
gibt false zurück;
}
// Zeichnet das Bild neu this.render();
gibt true zurück;
};
let canvas = document.createElement('canvas');
Canvas.Breite = Fenster.Innenbreite – 20;
Leinwandhöhe = Fensterinnenhöhe – 30;
Dokument.Body.InsertBefore(Canvas, null);
let Kontext = Canvas.getContext('2d');
const conf = {
Frequenz: 50,
x: Leinwandbreite,
y: Leinwandhöhe
};
sei Partikel = [],
Frequenz = Konf.Frequenz;
setzeIntervall(Funktion(){
bevölkern();
}.bind(null), Frequenz);
Funktion bevölkern(){
Partikel.push(
neues Partikel(Kontext, {
x: conf.x / 2,
y:conf.y/2
})
);
Rückgabepartikel.Länge;
}
Funktion löschen() {
Kontext.globalAlpha = 0,04;
Kontext.Füllstil = "#000042";
Kontext.fillRect(0,0,Leinwandbreite, Leinwandhöhe);
Kontext.globalAlpha = 1;
}
Funktion update(){
Partikel = Partikel.Filter(p => p.Bewegen());
klar();
requestAnimationFrame(argumente.callee);
}
aktualisieren();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:
|
<<: Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux
>>: Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung
Artikel empfehlen
Lösung für das Problem, dass Vue-Binding-Objekte und Array-Variablen nach der Änderung nicht gerendert werden können
Projektszenario: Auf der Seitenanzeige befindet s...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
WeChat-Applet implementiert Suchfeldfunktion
In diesem Artikelbeispiel wird der spezifische Co...
Teilen Sie die von Webdesign-Meistern häufig verwendeten responsiven Frameworks (Zusammenfassung)
Dieser Artikel stellt die von Webdesign-Meistern ...
Vier Lösungen für die Verwendung von setTimeout in JS for-Schleifen
Inhaltsverzeichnis Überblick Lösung 1: Verschlüss...
Warum MySQL Repeatable Read als Standardisolationsebene wählt
Inhaltsverzeichnis Oracle-Isolationsebenen MySQL-...
So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird
Vorwort Manchmal verschiebt sich der Inhalt des E...
Verwenden Sie Javascript, um eine dynamische QQ-Registrierungsseite zu erstellen
Inhaltsverzeichnis 1. Einleitung 1. Grundlayout 2...
2 Methoden und Vorsichtsmaßnahmen zum Hinzufügen von Skripten in HTML
So fügen Sie ein <script>-Skript in HTML ein...
Beispielanalyse für die Farbabstimmung einer Webseite: Analyse der Webseite mit grüner Farbabstimmung
<br />Grün liegt zwischen Gelb und Blau (kal...
Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus
Dieser Artikel darf gerne geteilt und zusammengef...
js Canvas zur Realisierung des Gobang-Spiels
In diesem Artikel wird der spezifische Code der L...
So verbinden Sie Navicat mit der Docker-Datenbank auf dem Server
Starten Sie den MySQL-Container in Docekr Verwend...
Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt
1: schreibgeschützt dient zum Sperren dieses Steue...
Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Was ist ein Prototyp? 2. Pr...