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
Analyse der Nutzung des Xmeter API-Schnittstellentesttools
XMeter API bietet einen umfassenden Online-Schnit...
Vue-Element implementiert das Hinzufügen, Löschen und Ändern von Daten in Tabellen
In diesem Artikel wird der spezifische Code des V...
Implementierung der Kommunikation zwischen Vue und Flask
axios installieren und Kommunikation implementier...
So implementieren Sie eine Array-Lazy-Evaluation-Bibliothek in JavaScript
Inhaltsverzeichnis Überblick So erreichen Sie es ...
Docker5 - Vollfunktionaler Hafenlager-Bauprozess
Harbor ist ein Registry-Server auf Unternehmenseb...
Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]
Ich bin vor zwei Tagen beim Bearbeiten der schrift...
MySQL versteht kurz, wie "order by" funktioniert
Zum Sortieren ist „order by“ ein Schlüsselwort, d...
Implementierungsmethode des Nginx+Tomcat-Lastausgleichsclusters
Die experimentelle Umgebung ist wie folgt Hier mü...
So konfigurieren Sie pseudostatisches und clientadaptives Nginx
Das Backend verwendet das Framework thinkphp3.2.3...
So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten
<br />Einige Webseiten sehen nicht groß aus,...
Centos7-Startvorgang und Nginx-Startkonfiguration in Systemd
Centos7-Startvorgang: 1.post (Selbsttest beim Ein...
Eine kurze Analyse von Kubernetes-Controllern und -Labels
Inhaltsverzeichnis 01 Gemeinsame Controller in k8...
Methoden zum lokalen Sichern von Windows Server-Dateien, Lösungen zum Sichern von Windows Server-Daten
Wichtige Daten müssen gesichert werden, und zwar ...
Code zur Änderung des CSS-Bildlaufleistenstils
Code zur Änderung des CSS-Bildlaufleistenstils .s...
Mehrere Methoden zum Bereitstellen mehrerer Front-End-Projekte mit nginx
Ich habe 3 Methoden zusammengefasst, um mehrere F...