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
Mit vsftp einen FTP-Server unter Linux aufbauen (mit Parameterbeschreibung)
einführen In diesem Kapitel wird hauptsächlich de...
Praktische Methode zum Upgrade von PHP auf 5.6 unter Linux
1: Überprüfen Sie die PHP-Version nach dem Aufruf...
Dieser Artikel zeigt Ihnen, wie Sie mit CSS-Rahmen spielen
Rahmenstil Die Eigenschaft „Border-Style“ gibt an...
20 CSS-Codierungstipps für mehr Effizienz (sortiert)
In diesem Artikel möchten wir eine Sammlung von 2...
Tipps zum Deaktivieren des Kompatibilitätsansichtsmodus von IE8 und IE9 mithilfe von HTML
Ab IE 8 wurde ein Kompatibilitätsmodus hinzugefügt...
So implementieren Sie die Größenanpassung mobiler Webseiten
Ich habe das vorliegende Projekt endlich abgeschl...
Detaillierte Erklärung der Syntax und des Prozesses der Ausführung von MySQL-Transaktionen
Zusammenfassung: MySQL bietet eine Vielzahl von S...
mysql 5.7.11 winx64 anfängliche Passwortänderung
Laden Sie die komprimierte Version von MySQL-5.7....
So übermitteln Sie den Wert eines deaktivierten Formularfelds in einem Formular Beispielcode
Wenn ein Formularfeld in einem Formular deaktivier...
Detaillierte Erklärung zur korrekten Konfiguration von SSL (https-Zertifikat) in Apache unter Ubuntu
Schauen Sie sich zunächst das offizielle Tutorial...
CSS3 implementiert fehlendes Eckrechteck, gefaltetes Eckrechteck und fehlenden Eckrand
Vorwort Vor ein paar Tagen bin ich zufällig auf d...
Eine kurze Analyse zum Verständnis von Vue-Komponenten aus einer objektorientierten Perspektive
Wenn dieselbe Funktion und derselbe HTML-Code meh...
Das Laufschrift-Tag in HTML erzielt einen nahtlosen Laufschrift-Effekt
Das <marquee>-Tag ist ein Tag, das paarweis...
So verwenden Sie Balkendiagramme in Vue und ändern die Konfiguration selbst
1. Echart in HTML-Datei importieren <!-- E-Cha...
So aktualisieren Sie die Ansicht synchron nach Datenänderungen in Vue
Vorwort Vor kurzem bin ich auf ein interessantes ...