HTML5 - Erweiterter Canvas

Bei Verwendung des Artikels Segeltuch Zum Zeichnen sind wir nicht darauf beschränkt, rechteckige Figuren zu zeichnen, wir können auch mit Koordinaten und den sogenannten zeichnen Wege das sind Pfade, durch die wir das Element anzeigen werden Segeltuch wo und wie wir unsere Zeichnung zeigen.
Die Möglichkeiten, die uns dies bietet, sind beeindruckend, denn mit den notwendigen Algorithmen können wir unbegrenzte Kompositionen erstellen, jede Art von Figur zeichnen HTML5 und damit, bis in Verbindung mit anderen Elementen Ergebnisse erzielt werden, die in früheren Spezifikationen der Sprache nicht vorgestellt wurden.
Pfad verwenden
Wie wir bereits erwähnt haben Weg ermöglicht es uns, der Leinwand die Koordinaten anzugeben, mit denen die Zeichnung erstellt werden soll. Mit diesen Koordinaten kann die Leinwand wissen, wo die entsprechenden Linien zu zeichnen sind, und am Ende können wir mit der richtigen Ansammlung von Linien alle erreichen Art der Figur.
Bevor wir zu den entsprechenden Beispielen übergehen, müssen wir wissen, welche Methoden für das Canvas-Element und den Pfad verfügbar sind, sehen wir uns die folgende Liste an:

• beginPath(): Diese Methode ermöglicht es uns, einen neuen Pfad zu beginnen.
• closePath(): Diese Methode versucht, den aktuellen Pfad zu schließen, indem eine Linie vom Ende der letzten Linie zu den Anfangskoordinaten gezogen wird.
• füllen (): Füllen Sie die von den Unterpfaden beschriebenen Formulare aus.
• isPointInPath (x, y): Gibt true zurück, wenn der angegebene Punkt in der vom aktuellen Pfad gezeichneten Form enthalten ist.
• lineTo (x, y): Zeichnen Sie einen Unterpfad an den angegebenen Koordinaten.
• moveTo (x, y): Es ermöglicht uns, uns zu den angegebenen Koordinaten zu bewegen, ohne einen Unterpfad zeichnen zu müssen.
• gerade (x, y, w, h): Zeichnen Sie ein Rechteck, dessen Koordinaten in der oberen linken Ecke (x, y) entsprechen, seine Breite entspricht w und seine Höhe entspricht h.
• Schlaganfall (): Zeichnen Sie die äußeren Linien der vom Unterpfad gezeichneten Formen.

Sobald wir wissen, welche Werkzeuge wir zur Verwendung der Leinwand benötigen, müssen wir die Reihenfolge des Flusses kennen, mit der wir eine Zeichnung erstellen können. Diese Reihenfolge ist wie folgt:
• Wir nennen die Methode beginPath.
• Wir bewegen uns in die Ausgangsposition mit der Methode ziehen nach.
• Wir zeichnen die Teilpfade mit den Methoden lineTo, etc.
• Optional können wir die Methode aufrufen closePath.
• Schließlich rufen wir die Methoden auf füllen oder schüren.
Wir haben bereits die empfohlene Reihenfolge, um mit dem Zeichnen zu beginnen, jetzt sehen wir den entsprechenden Code in HTML5.

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch 

Wie wir sehen können, werden zwei Anrufe getätigt an beginPath(), damit können wir die Zeichenbereiche auf der Leinwand starten, dann mit moveTo () die Anfangspositionen festlegen und der Rest ist zu zeichnen.
Sehen wir uns an, wie unsere Zeichnung im Browser aussieht:

Damit beenden wir das Tutorial und kennen nicht nur die verschiedenen Methoden und zusätzlichen Werkzeuge, die wir verwenden können, sondern betonen auch, dass es sich nicht mehr nur um rechteckige Formen handelt, die wir zeichnen können.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben