Realisieren Sie einen super coolen Wasserlichteffekt auf Leinwandbasis
|
In diesem Artikelbeispiel erfahren Sie den spezifischen Code zur Implementierung eines supercoolen Wasserlichteffekts auf Leinwandbasis zu Ihrer Information. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Super cooler Wasserlichteffekt basierend auf Leinwand</title>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
Leinwand{
Rand: 1px durchgehend rot;
Breite: 100 %;
Höhe: 100%;
}
</Stil>
</Kopf>
<body onselectstart="return false">
<!-- Fügen Sie das Canvas-Tag hinzu und fügen Sie einen roten Rand hinzu, damit es auf der Seite leichter zu erkennen ist-->
<canvas id="meineCanvas" >
Ihr Browser unterstützt das Canvas-Tag nicht.
</Leinwand>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<Skripttyp="text/javascript">
var canvas = document.getElementById("meineCanvas");
var ctx = canvas.getContext("2d");
var cx1 = Leinwand.offsetLeft;
var cy1 = canvas.offsetTop;
var cx2 = Leinwand.OffsetLinks + Leinwand.OffsetBreite;
var cy2 = canvas.offsetTop + canvas.offsetHeight;
var bbox = canvas.getBoundingClientRect();
$(Funktion(){
var Richtung = „rechts“, x = y = Rechtsanzahl = Abwärtsanzahl = Linksanzahl = Aufwärtsanzahl = 0;
ctx.beginPath(); //Starte einen neuen Zeichenpfad ctx.moveTo(x, y); //Definiere die Startpunktkoordinaten der Linie als (0,0)
setzeIntervall(Funktion(){
ctx.strokeStyle = '#'+Math.floor(Math.random()*16777215).toString(16);
Schalter(Richtung){
Fall 'richtig':
wenn(x >= 300 - right_count){
Richtung = „nach unten“;
rechts_zählen++;
}anders{
x++;
}
brechen;
Fall 'down':
wenn(y >= 150 - down_count){
Richtung = "links";
herunterzählen++;
}anders{
y++;
}
brechen;
Fall 'links':
wenn(x <= linke_Anzahl){
Richtung = „nach oben“;
Anzahl_links++;
}anders{
X--;
}
brechen;
Fall 'oben':
wenn(y <= up_count + 1){
Richtung = "rechts";
hochzählen++;
}anders{
j--;
}
brechen;
}
ctx.lineTo(x, y);
ctx.lineCap = "rund";
ctx.lineWidth = 1; //Breite des Liniensegments festlegen ctx.stroke(); //Eine gerade Linie entlang des Pfads der Koordinatenpunktfolge zeichnen }, 1);
})
</Skript>
</body>
</html>Screenshots der Effekte: Die Lauflichter sind immer an und drehen hier überwiegend ihre Kreise.
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 Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL
>>: Detaillierte Erläuterung zweier Möglichkeiten der Linux-Dienstverwaltung: service und systemctl
Artikel empfehlen
Tutorial zur Installation und Konfiguration der Remote-Anmeldung bei MySQL unter Ubuntu
In diesem Artikel finden Sie das Tutorial zur Ins...
Ein Artikel zum Verständnis der Erstellung, des Hochladens, Abrufens und Bereitstellens von Docker-Images
Inhaltsverzeichnis 1. Bilder 1. Was ist ein Spieg...
Einführung in das Linux-Netzwerksystem
Inhaltsverzeichnis Netzwerk Informationen Ändern ...
MySQL 8.0.20 Window10 kostenlose Installationsversion Konfiguration und Navicat Management Tutorial Grafik detaillierte Erklärung
1. MySQL 8.0.20 herunterladen und dekomprimieren ...
Detaillierte Erläuterung der Lösung für verstümmelte Zeichen, wenn JDBC eine Verbindung zu MySQL herstellt, um Chinesisch zu verarbeiten
Detaillierte Erläuterung der Lösung für verstümme...
MySQL verwendet Union, um die Daten zweier Tabellen zusammenzuführen und anzuzeigen
Verwenden des UNION-Operators Union : Wird verwen...
Detaillierte Erklärung zum Javascript-Event-Bubbling, Event-Capture und Event-Delegation
1. Ereignissprudeln : Wenn im Prozess der Ereigni...
Tutorial zum Kompilieren und Installieren von MySQL 5.7.17 aus dem Quellcode auf dem Mac
1. Herunterladen und entpacken nach: /Users/xiech...
Mausposition in CSS abbilden und Seitenelemente durch Mausbewegungen steuern (Beispielcode)
Ob das Mapping der Mausposition oder das Implemen...
nginx löst das Problem der langsamen Bildanzeige und des unvollständigen Downloads
Vorne geschrieben Kürzlich berichtete mir ein Les...
MySQL 8.0.12 Einfaches Installations-Tutorial
In diesem Artikel finden Sie das Installations-Tu...
Lösen Sie das Problem, dass Docker das MySQL-Image zu langsam zieht
Nachdem wir eine halbe Stunde lang versucht hatte...
Docker entfernt abnormale Containervorgänge
Dieser Neuling ist auf ein solches Problem gestoß...
Tiefgreifendes Verständnis des Ereignisausführungsmechanismus von JavaScript
Inhaltsverzeichnis Vorwort Das Prinzip der asynch...
Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort
Inhaltsverzeichnis Vorwort analysieren Daten insg...