JavaScript Canvas realisiert farbenfrohen Sonnenhalo-Effekt
|
In diesem Artikelbeispiel wird der spezifische Code des JavaScript-Canvas zur Erzielung des farbenfrohen Sonnenhalo-Effekts als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Dokument</title>
<Skript>
fenster.onload = funktion(){
var Leinwand = document.getElementById('Leinwand');
var cx = canvas.getContext("2d");
cx.fillStyle='rosa';
cx.strokeStyle='rosa';
für(var i=0;i<10;i++){
var g = cx.createLinearGradient(0,0,290,290);
g.addColorStop(0,'rgba(255,0,0,1)');
g.addColorStop(0.1,'rgba(255,0,0,0.5)');
g.addColorStop(0.2,'rgba(255,165,0,0.4)');
g.addColorStop(0.4,'rgba(205,255,0,0.5)');
g.addColorStop(0.6,'rgba(230,145,0,0.5)');
g.addColorStop(0.8,'rgba(0,127,255,0.5)');
g.addColorStop(0.9,'rgba(100,200,205,0.9)');
g.addColorStop(1,'rgba(0,255,255,0.5)');;
cx.fillStyle=g;
cx.beginPath();
cx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
cx.closePath();
cx.füllen();
}
}
</Skript>
</Kopf>
<Text>
<canvas id="canvas" width="600px" height="600px" style="Hintergrundfarbe: #ccc;"></canvas>
</body>
</html>Das Wirkungsdiagramm sieht wie folgt aus:
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:
|
<<: MySQL 5.7.18 MSI-Installations-Grafik-Tutorial
>>: Eine vollständige Anleitung zur Docker-Befehlszeile (18 Dinge, die Sie wissen müssen)
Artikel empfehlen
Detaillierte Erklärung zum Ersetzen in ein Beispiel in MySQL
Detaillierte Erklärung zum Ersetzen in ein Beispi...
Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft
Boost installieren Es gibt viele Möglichkeiten, C...
Untersuchung und Korrektur des seltsamen Verhaltens von parseInt() in js
Hintergrund: Ich frage mich, ob Ihnen aufgefallen...
So erstellen Sie einen K8S-Cluster und installieren Docker unter Hyper-V
Wenn Sie das Win10-System installiert haben und e...
So konfigurieren Sie Hexo und GitHub zum Binden eines benutzerdefinierten Domänennamens unter Windows 10
Hexo bindet einen benutzerdefinierten Domänenname...
Bringen Sie Ihnen den detaillierten Prozess der Verwendung von Docker zum Erstellen der chinesischen Version der Gitlab-Community bei
1. Verwenden Sie Docker Compose, um den Start zu ...
Lösung für das Problem der Werteübergabe zwischen HTML-Seiten
Als ich den Aufsatz zum ersten Mal verwendete, füh...
Einfaches HTML-Applet für Einkaufsmengen
Dieser Artikel stellt Ihnen ein einfaches HTML-Ap...
Detaillierte Erklärung verschiedener Join-Zusammenfassungen von SQL
SQL Left Join, Right Join, Inner Join und Natural...
So speichern Sie Text und Bilder in MySQL
Große Textdatentypen in Oracle Clob-Langtexttyp (...
Einfache Implementierung zum Ignorieren von Fremdschlüsseleinschränkungen beim Löschen von MySQL-Tabellen
Das Löschen einer Tabelle kommt nicht sehr häufig...
Wie lang ist eine Funktion in js?
Inhaltsverzeichnis Vorwort Warum Wie viel kostet ...
So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
mysql erstellt Root-Benutzer und normale Benutzer sowie Änderungs- und Löschfunktionen
Methode 1: Verwenden Sie den Befehl SET PASSWORD ...
Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)
Inhaltsverzeichnis 1. Staatshaken 1. Grundlegende...