Inhaltsverzeichnis
Mit den verschiedenen Zeichenmethoden, die in der Segeltuch Es ist möglich, Bereiche darin zu definieren, die gezeichnet werden sollen, obwohl dies etwas komplexer ist, aber durchaus machbar, wir haben jedoch auch die Möglichkeit, das gleiche Ergebnis mit der Clip ()-Methode zu erzielen.Ein weiterer Aspekt, der auch in die Leinwand ist die Textzeichnung, denken wir vielleicht, dass wir mit CSS und anderen Elementen einen Text zeichnen können, der gleich oder besser aussieht, jedoch in der Segeltuch ermöglicht uns die Anwendung nativer Animationen in HTML5.
Clip-Methode
Wie eingangs erwähnt, vereinfacht diese Methode den Weg zu Wie können wir einen Abschnitt innerhalb einer Leinwand erstellen?, um weitere gezeichnete Elemente, wie z. B. eine neue Zeichnung, einfügen oder mit einer bestimmten Farbe füllen zu können.
Um dieses Tool zu verwenden, müssen wir die Methode aufrufen Clip (), erstellt diese Methode eine Region von Ausschnitt oder einen neuen Abschnitt, sehen wir uns im folgenden Code an, wie es funktioniert:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch In diesem Code zeichnen wir zuerst ein großes Rechteck in Gelb, dann erstellen wir darin eine neue Region mit dem clip()-Methode und innerhalb dieser Region erzeugen wir ein neues rotes Rechteck.
Sehen wir uns an, wie das in unserem Browser aussieht:
Wir können auch Text innerhalb einer Leinwand zeichnen, dafür haben wir die folgenden Methoden:
fillText (, x, y, Breite): Zeichnet und füllt den im ersten Parameter angegebenen Text an Position (x, y). Auch seine Argumentation Breite es ist optional, aber wenn es deklariert wird, wird die Breite des Textes begrenzt.
StrichText (, x, y, Breite): Zeichnet und belässt den Text ohne Auffüllen an Position (x, y). Wie die vorherige Methode in ihrem optionalen Argument begrenzt sie die Breite des Textes.
Sehen wir uns das folgende Beispiel an, wie Sie diese Methoden verwenden, um Text auf unserer Leinwand zu zeichnen:
Beispiel Ihr Browser unterstützt das Element nicht Segeltuch In diesem Code verwenden wir beide Methoden, um den gleichen Text zu zeichnen, beide an der gleichen Position, aber mit einer anderen Farbe, mit der wir einen Effekt eines äußeren Rahmens einer Farbe und einer Füllung einer anderen Farbe erzielen, damit können wir ein Mehr deutlicher Unterschied zwischen Fülltext Ja StrichText.
Abschließend und zum Abschluss dieses Tutorials sehen wir uns an, wie es im Browser aussieht.
