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
Blog-Design Webdesign-Debüt
Die erste Webseite, die ich entworfen habe, sieht...
JavaScript zur Implementierung eines einfachen Einkaufsformulars
In diesem Artikel wird der spezifische JavaScript...
So installieren Sie die Odoo12-Entwicklungsumgebung unter Windows 10
Vorwort Da viele Freunde sagen, dass sie keinen M...
Detaillierte Erläuterung der mysql5.6 Master-Slave-Einrichtung und asynchroner Probleme
Inhaltsverzeichnis 1. MySQL Master-Slave-Replikat...
Zusammenfassung und Praxis des Javascript-Prototyp-Kettendiagramms
Inhaltsverzeichnis Prototypenkette Wir können ein...
Detaillierte Erklärung der Verwendung des Linux-Befehls „tee“
Der Befehl tee wird hauptsächlich verwendet, um d...
Verstümmelte Zeichen und Lösungen im MySQL-Zeichensatz
Vorwort Ein Zeichensatz ist eine Reihe von Symbol...
So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online
Vorwort: Die am häufigsten verwendete Architektur...
Dieser Artikel hilft Ihnen, JavaScript-Variablen und -Datentypen zu verstehen
Inhaltsverzeichnis Vorwort: Freundliche Tipps: Va...
Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern
Einige Tipps zur umfassenden Optimierung, um die ...
Beispielcode zur Implementierung einer einfachen Suchmaschine mit MySQL
Inhaltsverzeichnis Vorwort Einführung Ngram-Vollt...
Tutorial zur HTML-Tabellenauszeichnung (37): Hintergrundbild-Attribut BACKGROUND
Legen Sie das Hintergrundbild für die Tabellenübe...
So verwenden Sie Nginx zum Simulieren der Canary-Freigabe
Dieser Artikel stellt die Blue-Green-Bereitstellu...
Tutorial zur binären Kompilierung und Installation von MySql centos7 unter Linux
// Ich habe einen ganzen Nachmittag für die Insta...
Spezifische Verwendung des Ausnahmefilters Exceptionfilter in nestjs
Wenn wir über den Ausnahmefilter von Nestjs sprec...