So erstellen Sie Formen mit HTML-Canvas

Inhaltsverzeichnis

1. Einführung
2. Erste Schritte
3. Formen zeichnen
4. Fazit

✍️ Einführung

HTML Das Element wird beim Erstellen von Inhalten verwendet, die Grafiken enthalten. Dies gibt Entwicklern die Möglichkeit, Formen, Texte und Formen einschließlich Stilen und Animationen zu zeichnen.

✨ Erste Schritte mit Canvas

Beim Erstellen der Formen mit HTML gibt es einige Tipps zum Einrichten

• 1. Hinzufügen von Element zur HTML-Seite, um seine Verwendung anzugeben. Im Canvas-Tag ist das Attribut „identity(id)“ enthalten, das dynamisch von Javascript gesteuert wird. Sie sollten auch die Breite und Höhe festlegen, um die Größe des Canvas-Elements zu bestimmen

• 2. Bearbeiten der Element mit JavaScript, indem Sie das Element mithilfe der ID abrufen und dem konstanten Canvas zuweisen. Die Methode getContext("2d") sorgt dafür, dass die Leinwand als Text, Form oder Bild gerendert wird.

✏️ Formen zeichnen

? Rechteck

Diese Methoden können verwendet werden, um ein Rechteck zu erstellen, wobei x = die x-Koordinate des Rechtecks, y = die y-Koordinate des Rechtecks, width = die Breite des Rechtecks ​​und die Höhe des Rechtecks.

• fillRect(x, y, Breite, Höhe) Diese Methode erstellt ein gefülltes Rechteck mit einem Füllstil, um ihm eine bestimmte Farbe zu geben.

• StrokeRect(x, y, Breite, Höhe) Diese Methode erstellt ein Umrissrechteck oder ein Rechteck mit einem Strich. Mit dem StrokeStyle kann Farbe hinzugefügt werden.

• clearRect(x, y, Breite, Höhe) Diese Methode erstellt ein transparentes Rechteck, Sie müssen jedoch die Breite und Höhe der Leinwand angeben und einen Farbnamen angeben, damit das transparente Rechteck gerendert werden kann

? Quadrat

Die Methoden zum Erstellen eines Quadrats sind die gleichen wie bei einem Rechteck. Der Unterschied besteht im Breitenwert, der im Gegensatz zum Rechteck mit der Höhe übereinstimmt.

? Dreieck

Mit diesen Methoden kann ein Dreieck erstellt werden.

-beginPath(): Mit dieser Methode wird ein neuer Pfad für die Zeichnung erstellt.
-moveTo(x, y): Diese Methode hilft, den Stift am ersten Scheitelpunkt des Dreiecks zu bewegen
-lineTo(x, y): Diese Methode zeichnet den unteren Scheitelpunkt des Dreiecks.

⚪️ Kreis

Die folgenden Methoden werden zum Erstellen eines Kreises verwendet:

• beginPath(): Diese Methode, um einen Pfad zu beginnen.
• arc(x, y, radius, startAngle, endAngle, gegen den Uhrzeigersinn): Dies dient zum Erstellen eines Kreises, wobei x und y für die Mittelpunktskoordinaten des Mittelpunkts stehen, radius der Radius des Kreises ist, startAngle und endAngle ein Winkel für den sind Kreis.
• Math.PI – Dies wird zum Erstellen eines Halbkreises verwendet, während die Multiplikation mit 2 einen Vollkreis ergibt

? Ellipse

Diese Form verwendet die gleichen Arten von Methoden, verwendet jedoch:

-ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, gegen den Uhrzeigersinn): wobei
-x und y sind die Mittelpunktskoordinaten der Ellipse,
-radiusX und radiusY sind die horizontalen und vertikalen Radien von
Ellipse,
-rotation zeigt die Drehung der Ellipse im Bogenmaß an,
-startAngle und endAngle geben den Start- und Endwinkel für
an Zeichnung, im Bogenmaß und
-gegen den Uhrzeigersinn, was optional ist und den Wert „true“ oder „false“ hat
(Standard ist false).

? Parallelogramm

Diese Form verwendet die folgenden Methoden:

• beginPath, um einen neuen Zeichenpfad zu beginnen, und moveTo(x, y), um die erste Ecke festzulegen, da die Form 4 Seiten mit 4 Ecken hat.
• lineTo, um die Linien zu zeichnen, die sie miteinander verbinden, da es 4 Seiten gibt.

? Trapez

Diese Form ist dem Parallelogramm sehr ähnlich, sie verwenden die gleichen Methoden zum Zeichnen. Der einzige Unterschied besteht in den Koordinatenwerten.

? Kegel

Diese Form kombiniert die Methoden des Dreieckzeichnens mit den Methoden des Halbkreises.

? Polygon

Um ein Polygon zu erstellen, müssen Sie die Seiten der Form bestimmen, da es eine unterschiedliche Anzahl von Seiten gibt.

Die folgenden Methoden werden zum Erstellen eines Polygons verwendet:

• beginPath(): Diese Methode dient zum Erstellen einer neuen Form.
• closePath(): Diese Methode dient zum Beenden der Form.
• cx: sein Wert für den Mittelpunkt der x-Koordinaten.
• cy: Sein Wert gibt das Zentrum für y-Koordinaten an.
• Radius: Radius der Form.

Um den Winkel zu erhalten, müssen Sie mit dieser Formel berechnen, indem Sie den Kreis in zwei Teile teilen;

angle = 2π/ n

• Fünfeck

• Sechseck
  

• Siebeneck

• Achteck

• Nonagon

• Zehneck

Abschluss

Endlich sind wir am Ende dieses Artikels angelangt. Die von uns erstellten Formen verfügen über eine Reihe von Methoden zum Zeichnen.

Vielen Dank fürs Lesen. Vernetzen Sie sich mit mir unter
Linkedin

X

Das obige ist der detaillierte Inhalt vonSo erstellen Sie Formen mit HTML-Canvas. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!