suchen

Heim >Web-Frontend >js-Tutorial >HTML Canvas leicht gemacht: Ein Leitfaden für Anfänger.

HTML Canvas leicht gemacht: Ein Leitfaden für Anfänger.

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-12-20 13:38:10717Durchsuche

Inhaltsverzeichnis

  1. Einführung
  2. Erste Schritte
  3. Grundlagen des Zeichnens
  4. Text hinzufügen
  5. Fazit und nächste Schritte

? Einführung

HTML ist ein HTML-Element mit dem Tag das zum Zeichnen von Grafiken in zwei oder drei Dimensionen über Javascript verwendet wird. Die ist ein Wrapper, der durch Javascript manipuliert werden kann, um Texte, Bilder, Formen und Animationen zu erstellen und so optisch ansprechende und interaktive Elemente zu erstellen.

HTML Canvas Made Simple: A Guide for Beginners.

Die Verwendung von ist in allen Browsern und Geräten verfügbar, was den Entwicklern die Flexibilität gibt, beeindruckende Grafiken zu erstellen.

Anwendungsfälle von HTML

  • Formen und Linien zeichnen: Es können Formen, Muster und Linien gezeichnet werden, einschließlich des Hinzufügens von Farben und Farbverläufen zu den Objekten.
  • Animation und Interaktion: Die von können animiert werden und auch Benutzerinteraktionen
  • Bildmanipulation: Dies kann zum Ändern der Größe oder zum Zuschneiden von Bildern verwendet werden.
  • Spielgrafiken: Sie werden auch von Spieleentwicklern verwendet, um schöne Benutzeroberflächen für Spiele zu erstellen
  • Datenvisualisierung: Zur Erstellung von Grafiken und Diagrammen.

?Erste Schritte

Das HTML wird in der HTML-Datei verwendet und kann intern im Skript-Tag oder extern in der Javascript-Datei manipuliert werden. Ohne diese Angabe wird das Canvas-Objekt nicht angezeigt.
Zuerst müssen wir eine index.html-Datei erstellen und den -Wrapper für das zu erstellende Objekt einbinden.

<!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Then we add a script tag so we can define the behavior of the object.<br>
</p>

<pre class="brush:php;toolbar:false"><!doctype html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>HTML Canvas Example</title>
     </head>
     <body>
       <canvas>



<p>Wowu !!! We get the output.</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173467309470040.jpg" alt="HTML Canvas Made Simple: A Guide for Beginners."></p>

<p>Looking at the structure of the code. We define canvas wrapper having an id attribute, this is can only be done by id and not class because of uniqueness which is used to reference the canvas with the id name.<br>
To access this we need to retrieve the node created in the Document Object Model(DOM) by using the getElementById("myCanvas") and have access to it using the getContext("2d") method.</p>

<p>This method make us to have access to different drawing methods like</p>
  • fillRect(x, y, width, height): This method is to draw a filled rectangle at a position(x, y) with a specified width and height.
  • fillStyle = colorName: It is a property to set the color for the object. It could be a colorname, RGB or hex code for the object.

Other methods are:

  • strokeRect(x, y, width, height): This method to to make a outline stroke on the rectangle, this may be used independently or combined with fillStyle and fillRect(x, y, width, height).
  • clearRect(x, y, width, height): to clear the rectangle by making it transparent.

HTML Canvas Made Simple: A Guide for Beginners.

? Drawing basics

Different shapes and lines can be drawn using some specific methods depending on the object.

1. Path:

Examples are line, wavy line, zigzag e.t.c

HTML Canvas Made Simple: A Guide for Beginners.

For creating a line, the following method needs to be set up:

  • beginPath(): This method is to start a new path for a drawing.
  • moveTo(x, y): This is to move the drawing to the specified points.
  • lineTo(x, y): This is to draw from the current position to the specified points.
  • stroke(): This is to draw the line.

HTML Canvas Made Simple: A Guide for Beginners.

2. Rectangle and Square

  • Rectangle

HTML Canvas Made Simple: A Guide for Beginners.

  • Square

HTML Canvas Made Simple: A Guide for Beginners.

These following methods are used in creating a rectangle or square:

  • fillRect: this method is for create rectangle and square only.
  • clearRect(x, y, width, height): this method is to clear rectangle hence making it transparent.
  • strokeRect(x, y, width, height): is used to create an outline rectangle or square.
  • fillStyle: this is used to fill the container of the rectangle or square.
  • strokeStyle: this method is for add stroke color to an outline rectangle.
  • roundRect(x, y, width, height, radii): this method is for creating round border rectangle.

3. Circle

HTML Canvas Made Simple: A Guide for Beginners.
These following methods are used in creating a circle:

  • beginPath(): this method to begin a path.
  • arc(x, y, radius, startAngle, endAngle, anticlockwise): this is for to create circle where x and y is for center coordinate of the center, radius is the radius of the circle, startAngle and endAngle which is an angle for the circle.

4. Polygon

To create a polygon, you need to determine the sides of the shape, it could be a triangle(3 sides), pentagon (5 sides), hexagon(6 sides) or decagon (10 sides).

HTML Canvas Made Simple: A Guide for Beginners.

These following methods are used in creating a circle:

  • beginPath(): this method is to create a new shape.
  • closePath(): this method is to end the shape.
  • cx: its value for the center of x co-ordinates.
  • cy: its value specifies the center for y co-ordinates.
  • radius: radius of the shape.

To get the angle, you have to calculate with this formula by dividing the circle into two;

angle = 2π/ n

wobei π 3,14 ist; n ist die Anzahl der Seiten. Sie müssen auch π/2 minus, um die Position der Form von oben nach unten zu erhalten.
HTML Canvas Made Simple: A Guide for Beginners.

HTML Canvas Made Simple: A Guide for Beginners.

? Text mit

HTML Canvas Made Simple: A Guide for Beginners.

Um Text zu erstellen, werden die folgenden Methoden verwendet:

  • Schriftart: um Schriftgröße und Schriftfamilie anzugeben.
  • fillStyle: Dies dient dazu, dem Text Farbe hinzuzufügen.
  • fillText: Dies zeichnet einen gefüllten Text.
  • StrokeText: Dies zeichnet einen Umrisstext
  • createLinearGradient oder createRadialGradient: um dem Text Farbverläufe hinzuzufügen
  • textAlign: um den Text horizontal zu setzen

HTML Canvas Made Simple: A Guide for Beginners.

Fazit

Mit HTML kann beim dynamischen Zeichnen von Grafiken helfen. Damit haben Sie gelernt, wie man mit Leinwand zeichnet, einschließlich der Verwendung und Bedeutung, die die Grundlage für die spätere Erstellung komplexer Grafiken bildet.

Verbinde dich mit mir

Weitere Artikel zur Webentwicklung. Folgen Sie mir auf LinkedIn und X
LinkedIn X

Das obige ist der detaillierte Inhalt vonHTML Canvas leicht gemacht: Ein Leitfaden für Anfänger.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html Object for include using number this position animation canvas table Foundation Game
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beherrschen der Kontext-API von React: Ein umfassender Leitfaden zum Teilen des globalen StatusNächster Artikel：Beherrschen der Kontext-API von React: Ein umfassender Leitfaden zum Teilen des globalen Status

In Verbindung stehende Artikel

Mehr sehen