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
Lösung für das Problem, dass der Text unten links steht und bei der Gestaltung des Textbereichs nicht in der Größe geändert werden kann
Zwei kleine Probleme, die mich aber lange Zeit ges...
Was ist Nginx-Lastausgleich und wie wird er konfiguriert?
Was ist Lastenausgleich? Der Lastausgleich wird h...
Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker
Offizielle Hyperf-Website Hyperf offizielle Dokum...
MySQL-Einstellungen zum Ändern des Root-Passworts, MySQL-Serververbindung, Diagramm allgemeiner MySQL-Befehle
1. Root-Passwort festlegen und ändern Überprüfen ...
So überwachen Sie Tomcat mit LambdaProbe
Einführung: Lambda Probe (früher bekannt als Tomc...
Zusammenfassung des fragmentierten Wissens zum Docker-Management
Inhaltsverzeichnis 1. Übersicht 2. Anwendungsbeis...
So überwachen und löschen Sie abgelaufene Sitzungen in Tomcat
Vorwort Ich habe zufällig entdeckt, dass die halb...
Schritte zur Bereitstellungsmethode für Docker Stack für Webcluster
Docker wird immer ausgereifter und seine Funktion...
Detaillierte Erklärung zur Verwendung von MySQL mysqldump
1. Einführung in mysqldump mysqldump ist ein logi...
Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies
Bei jedem Besuch wird im Browser Cookie generiert...
So erreichen Sie ein zentriertes Layout im CSS-Layout
1. Legen Sie den übergeordneten Container auf ein...
JavaScript zum Erzielen eines einfachen Drag-Effekts
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erläuterung der Position der CSS-Sticky-Positionierung: Sticky-Problemgrube
Vorwort: position:sticky ist ein neues Attribut d...
Reines HTML+CSS, um einen Tippeffekt zu erzielen
In diesem Artikel wird hauptsächlich der durch re...
HTML-Tutorial: Ungeordnete Liste
<br />Originaltext: http://andymao.com/andy/...