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
Auf Wiedersehen Docker: So wechseln Sie in 5 Minuten zu Containerd
Docker ist eine sehr beliebte Containertechnologi...
Ubuntu 20.04-Desktopinstallation und Aktivierung der Root-Berechtigung sowie Details zur SSH-Installation
Der Artikel zeichnet hauptsächlich den einfachen ...
So beheben Sie den Startfehler des Docker-Containers
Frage: Nach dem Neustart des Computers kann der M...
Zusammenfassung der wichtigsten Attribute des Body-Tags
bgcolor="Textfarbe" background="Hin...
Detaillierte Erläuterung der Verwendung von Docker-Tag und Docker-Push
Detaillierte Erklärung des Docker-Tags Die Verwen...
So verwenden Sie Axios-Anfragen im Vue-Projekt
Inhaltsverzeichnis 1. Installation 2. Es gibt kei...
Detaillierte Erklärung von BOM und DOM in JavaScript
Inhaltsverzeichnis BOM (Browserobjektmodell) 1. F...
Zusammenfassung gängiger Optimierungsvorgänge der MySQL-Datenbank (Erfahrungsaustausch)
Vorwort Bei einer datenzentrierten Anwendung wirk...
Über die Probleme von Kongruenz und Ungleichheit, Gleichheit und Ungleichheit in JS
Inhaltsverzeichnis Kongruent und inkongruent kong...
JS Cross-Domain-XML – mit AS URLLoader
Kürzlich erhielt ich eine Anforderung für eine Fun...
Lösung für das Problem des Speicherns des Formats in HTML TextArea
Das Format des Textbereichs kann beim Speichern in...
Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann
Problembeschreibung MySQL meldet beim Start einen...
Implementierung der Docker-Container-Verbindung und -Kommunikation
Die Portzuordnung ist nicht die einzige Möglichke...
So wenden Sie TypeScript-Klassen in Vue-Projekten an
Inhaltsverzeichnis 1. Einleitung 2. Verwendung 1....
Lösung für MySQLSyntaxErrorException beim Herstellen einer Verbindung zu MySQL über Bitronix
Lösung für MySQLSyntaxErrorException beim Herstel...