HTML5 - Zeichnen auf der Leinwand

Der Schlüssel zu starken Strukturen sind die Fundamente, dafür müssen wir starke und gut definierte Fundamente haben, um das Element optimal nutzen zu können Segeltuch Zuerst müssen wir die grundlegenden Aspekte genau kennen und deshalb werden wir mit dem Zeichnen von Grundformen beginnen, damit wir lernen, wie die verschiedenen Zeichenmethoden funktionieren, und dann können wir komplexere Kompositionen erstellen.
Zeichne ein Rechteck
Das Rechteck ist eine sehr einfache Figur, die aus 4 Seiten besteht. Sehen wir uns die Methoden an, die uns zur Verfügung stehen, um es auf der Leinwand zeichnen zu können:

• clearRect (x, y, w, h): Reinigt ein Rechteck oder einen Teil eines zuvor angegebenen Rechtecks.
• fillRect (x, y, w, h): Wird verwendet, um ein gefülltes Rechteck zu zeichnen.
• StrichRechteck (x, y, w, h): Wird verwendet, um ein Rechteck ohne Füllung zu zeichnen.

Wie wir bemerkt haben, verwenden die vorherigen Methoden alle 4 Argumente, diese Argumente entsprechen den folgenden:

• x und sind die Grenzen des oberen linken Randes des Rechtecks.
• NS entsprechen Breite und Höhe.

Sehen wir uns ein einfaches Beispiel an, damit wir diese Elemente in die Praxis umsetzen können:

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch 

In diesem Beispiel sehen wir, dass wir einige Variablen definieren, wobei wir sagen: Versatz oder begrenzen, wo die Rechtecke beginnen, die Größe und dann eine var-Anzahl, die als Zähler für die Wiederholungen dient, also sehen wir im nächsten Abschnitt, dass wir Rechtecke dynamisch erstellen werden Browser:

Wir haben zwei Reihen mit jeweils 5 Rechtecken erstellt, wenn wir uns den Code ansehen, den wir die Methoden aufgerufen hatten fillRect () zuerst für gefüllte Rechtecke und dann zu StrichRecht für die nicht gefüllten.
Verwenden der Methode clearRect()
Was ist, wenn wir jetzt einen Teil der gefüllten Rechtecke reinigen wollen? Dafür haben wir die Methode clearRect (), im folgenden Code werden wir sehen, wie es funktioniert:

 Beispiel Ihr Browser unterstützt das Element nicht Segeltuch 

Für jede Wiederholung wenden wir einen Aufruf an die Methode an clearRect () und wenn wir den Algorithmus ausführen, haben wir ihn durch die gesamte Mitte der gefüllten Rechtecke gehen lassen. Sehen wir uns im folgenden Bild an, wie es in unserem Browser aussieht:

Hier sehen wir, wie wir eine zuvor gezeichnete Fläche gereinigt haben.
Damit beenden wir dieses Tutorial, in dem wir einige Methoden, mit denen wir unser Element zeichnen können, etwas genauer sehen konnten Segeltuch.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