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
Layui implementiert den Bestätigungscode der Anmeldeschnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Beispiele für die Interaktion zwischen MySQL und Python
Inhaltsverzeichnis 1. Daten vorbereiten Erstellen...
Grafisches Tutorial zur Installation und Konfiguration von mysql 5.7.11 winx64.zip
Installieren und konfigurieren Sie das MySql-Date...
Detaillierte Erläuterung der Verwendung des Baidu-Stils in Eslint im React-Projekt
1. Installieren Sie das Baidu Eslint Rule-Plugin ...
In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt
Ich möchte eine Frage stellen. Ich habe in Dreamw...
Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten
<Text> <div id="Wurzel"> &l...
Vue implementiert die Lupenfunktion der Produktdetailseite
In diesem Artikel wird der spezifische Code von V...
Einführung in den Prozess der Verwendung der NFS-Remote-Verzeichnismontage in der CentOS-Umgebung
Inhaltsverzeichnis 1. Einführung in NFS 2. NFS-Ko...
Tiefgreifendes Verständnis mathematischer Ausdrücke in CSS calc()
Der mathematische Ausdruck calc() ist eine Funkti...
Beispielcode zum Installieren der ASPNET.Core3.0-Runtime unter Linux
# Die folgenden Beispiele gelten für die x64-Bit-...
Springboot verwendet die Front-End- und Back-End-Interaktion von Vue + Echarts, um dynamische Donut-Diagramme zu realisieren
Inhaltsverzeichnis Vorwort 1. Umgebungskonfigurat...
SSM-Projekte werden häufig als War-Pakete bereitgestellt, wobei Tomcat und Maven zur Implementierung der Hot-Deployment-Konfiguration verwendet werden.
Hintergrund Wie wir alle wissen, müssen wir nach ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 (Win10 64 Bit)
In diesem Artikel finden Sie das grafische Tutori...
Beispiel für die Zuweisung von Werten zu ActiveX-Steuerelementeigenschaften anhand des Parameternamens in einer Webseite
Code kopieren Der Code lautet wie folgt: <HTML...
Beispielcode für CSS zum Erzielen eines Bildzoomeffekts und eines langsamen Übergangseffekts beim Bewegen der Maus
transform:scale() lässt sich ein proportionales V...