JavaScript Canvas implementiert Grafiken und Text mit Schatten
|
Verwenden Sie Canvas, um Grafiken und Text mit Schatten als Referenz zu erstellen. Die spezifischen Inhalte sind wie folgt
ctx.shadowBlur=20; Legen Sie den Schattenunschärfebereich fest. Sie können auch Die Eigenschaft shadowOffsetX legt den horizontalen Abstand zwischen dem Schatten und der Grafik fest. Code:
<!DOCTYPE html>
<html>
<Kopf>
<title>Grafiken und Texte mit Schatten erstellen</title>
</Kopf>
<Text>
<h3 align="center">Radialer Farbverlauf</h3>
<hr>
<canvas id="myc1" width="800" height="600"></canvas>
<Skripttyp="text/javascript">
var myc = document.getElementById("myc1"); //Neue Leinwand zeichnen var ctx = myc.getContext("2d"); //Zeichenumgebung auf 2d einstellen
var myg = ctx.createRadialGradient(130,200,0,130,200,90);
//addColorStop-Methode. Der erste Parameter ist der Prozentsatz im Bild und der zweite Parameter ist die Farbe myg.addColorStop(0,"white");
myg.addColorStop(0.5,"rosa");
myg.addColorStop(0.6,"grün");
myg.addColorStop(0.4,"blau");
ctx.fillStyle=myg;
ctx.shadowColor="black"; //Schattenfarbe ctx.shadowBlur=20; //Schattenunschärfebereich ctx.arc(130,200,100,0,Math.PI*2); //Einen neuen Kreis zeichnen ctx.fill();
ctx.beginPath();
var myg1 = ctx.createRadialGradient(550,250,50,550,250,200);
myg1.addColorStop(0,"blau");
myg1.addColorStop(0.6,"grün");
myg1.addColorStop(1,"rot");
ctx.fillStyle=myg1;
ctx.font="50px fett"; //Schriftgröße und Schriftstil festlegen ctx.shadowBlur=50; //Schattenunschärfebereich festlegen ctx.shadowColor="gelb"; //Schattenfarbe;
ctx.shadowOffsetX=30; //Horizontaler Online-Offset;
ctx.shadowOffsetY=-30; //Vertikaler Versatz nach unten;
ctx.fillText("Radioaktiver Gradiententext",350,200);
</Skript>
</body>
</html>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-Installationsinformationen unter Linux-Server anzeigen
>>: Nginx verwendet Lua+Redis, um IP dynamisch zu blockieren
Artikel empfehlen
MySQL-Techniken zum schnellen Datenvergleich
Im MySQL-Betrieb und bei der Wartung möchte ein F...
Der Ansichtsbereich im Meta-Tag steuert das Gerätebildschirm-CSS
Code kopieren Der Code lautet wie folgt: <meta...
Detaillierte Erläuterung der MySQL-Hochverfügbarkeitsarchitektur
Inhaltsverzeichnis Einführung MySQL-Hochverfügbar...
Lösung für das Problem der Installation der MySQL-komprimierten Version von Zip
Bei der Installation der komprimierten Version vo...
Übersicht über die Definition der HTC-Komponenten nach IE5.0
Vor der Veröffentlichung von Microsoft IE 5.0 best...
Installation und Verwendung von Vue
Inhaltsverzeichnis 1. Vue-Installation Methode 1:...
Implementierung eines Web-Rechners mit nativem JavaScript
In diesem Artikel wird der spezifische JavaScript...
So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen
Beschränken Sie input Eingabefeld auf reine Zahle...
Detaillierte Erklärung des Grid-Layouts und des Flex-Layouts der Anzeige in CSS3
Das Gitterlayout weist einige Ähnlichkeiten mit d...
Über den Fehler des Better-Scroll-Plug-Ins, der nicht gleiten kann (gelöst durch Plug-In im Jahr 2021)
Better-Scroll-Bildlaufprinzip Als übergeordneter ...
Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen
Inhaltsverzeichnis 1. Projektumgebung 2. Projektb...
Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken
Mit den MySQL-Funktionen CAST() und CONVERT() kön...
Der Unterschied zwischen dem Namen und der ID des Ziels eines Tags, das auf das Iframe verweist
Code kopieren Der Code lautet wie folgt: <ifra...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux
Ich habe diesen Blog geschrieben, um mich daran z...
Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit
docker-compose-monitor.yml Version: '2' N...