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
So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren
Heute werden wir ein Thunder Fighter-Tippspiel im...
Beispielanalyse der Verwendung gespeicherter MySQL-Prozeduren
Dieser Artikel beschreibt die Verwendung gespeich...
Beispiel für den schnellen Aufbau eines Redis-Clusters mit Docker
Was ist Redis Cluster? Redis Cluster ist eine von...
Detaillierte grafische Erklärung der MySQL-Abfragesteuerungsanweisungen
MySQL-Abfrage-Steueranweisungen Felddeduplizierun...
Eine kurze Diskussion über die maximale Anzahl geöffneter Dateien für MySQL-Systembenutzer
Was Sie aus Büchern lernen, ist immer oberflächli...
Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil
Die Bedeutung der Schreibreihenfolge Reduzieren S...
Die Darstellung und Öffnungsmethode eines Hyperlinks
<br />Verwandte Artikel: So rufen Sie einen ...
Sublime/vscode – schnelle Implementierung zur Generierung von HTML-Code
Inhaltsverzeichnis Grundlegende HTML-Struktur Gen...
Eine kurze Diskussion über JS-Prototypen und Prototypenketten
Inhaltsverzeichnis 1. Prototyp 2. Prototypzeiger:...
Beispielcode zur Implementierung einer dynamischen leuchtenden Spezialeffektanimation von Kreisen mit reinem CSS3
In diesem Artikel wird hauptsächlich der Beispiel...
Lösung für die Nginx-Installation ohne Generierung des sbin-Verzeichnisses
Fehlerbeschreibung: 1. Nach der Installation von ...
Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS
In diesem Artikelbeispiel wird der spezifische JS...
Vue implementiert einen dynamischen kreisförmigen prozentualen Fortschrittsbalken
Als ich kürzlich ein kleines Programm entwickelte...
MySQL REVOKE zum Löschen von Benutzerberechtigungen
In MySQL können Sie mit der REVOKE-Anweisung best...
Zusammenfassung verschiedener Methoden zur JS-Datentyperkennung
Inhaltsverzeichnis Hintergrund Welche Methoden gi...