Beim Zeichnen von Text denken wir vielleicht, dass wir mit CSS und anderen Elementen einen gleichwertigen oder besser aussehenden Text zeichnen können, aber wenn wir uns auf der Leinwand befinden, können wir native Animationen in anwenden HTML5
Clip-Methode
Wie eingangs erwähnt, vereinfacht diese Methode die Erstellung eines Abschnitts innerhalb einer Zeichenfläche, um andere gezeichnete Elemente einzufügen, da es sich um eine neue Zeichnung handeln oder diese mit einer bestimmten Farbe füllen kann.
Um dieses Tool verwenden zu können, müssen wir die clip () -Methode aufrufen. Diese Methode erstellt einen Beschneidungsbereich oder einen neuen Abschnitt. Sehen wir uns den folgenden Code an:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style> Leinwand {Rand: dünn schwarz} body> * {float: left;} </ style> </ head> <body> <canvas id = "canvas" width = "500" height = "140"> Ihr Browser unterstützt das Element <code> canvas </ code> nicht </ canvas> <script> var ctx = document.getElementById ("canvas"). getContext ("2d"); ctx.fillStyle = "gelb"; ctx.beginPath (); ctx.rect (0, 0, 500, 140); ctx.fill (); ctx.beginPath (); ctx.rect (100, 20, 300, 100); ctx.clip (); ctx.fillStyle = "Netzwerk"; ctx.beginPath (); ctx.rect (0, 0, 500, 140); ctx.fill (); </ script> </ body> </ html>
In diesem Code zeichnen wir zuerst ein großes Rechteck in Gelb, erstellen dann mit der clip () -Methode einen neuen Bereich darin und generieren innerhalb dieses Bereichs ein neues rotes Rechteck.
Mal sehen, wie das in unserem Browser ist:
Text zeichnen
Wir können auch einen Text innerhalb einer Zeichenfläche zeichnen. Dafür haben wir die folgenden Methoden:
fillText (<text>, x, y, width): Zeichnet und füllt den im ersten <text> -Parameter angegebenen Text an der Position (x, y). Das width- Argument ist ebenfalls optional, aber wenn es deklariert wird, wird eine Begrenzung für die Breite des Texts festgelegt.
strokeText (<text>, x, y, width): Zeichnen und belassen Sie den Text, ohne die Position (x, y) auszufüllen . Wie die vorherige Methode in ihrem optionalen Argument begrenzt sie die Breite des Texts.
Sehen wir uns das folgende Beispiel an, wie diese Methoden zum Zeichnen von Text auf unserer Zeichenfläche verwendet werden:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style> Leinwand {Rand: dünn schwarz} body> * {float: left;} </ style> </ head> <body> <canvas id = "canvas" width = "350" height = "140"> Ihr Browser unterstützt das Element <code> canvas </ code> nicht </ canvas> <script> var ctx = document.getElementById ("canvas"). getContext ("2d"); ctx.fillStyle = "hellgrau"; ctx.strokeStyle = "schwarz"; ctx.lineWidth = 3; ctx.font = "100px ohne Serife"; ctx.fillText ("Hello", 50, 100); ctx.strokeText ("Hello", 50, 100); </ script> </ body> </ html>
In diesem Code verwenden wir beide Methoden, um denselben Text an derselben Position, aber mit unterschiedlicher Farbe zu zeichnen, sodass wir den Effekt eines äußeren Rahmens einer Farbe und einer Füllung einer anderen Farbe erzielen. Dadurch können wir einen deutlicheren Unterschied zwischen den beiden feststellen fillText und strokeText .
Lassen Sie uns zum Abschluss dieses Tutorials sehen, wie es im Browser aussieht.
