Leinwand in html | Mit Beispielen erklärt

Ansgar Radtke
Leinwand in html | Mit Beispielen erklärt
In HTML, Tag kann verwendet werden, um die Grafiken auf den Websites zu zeichnen. Leinwand fungiert als Container für die Grafik. Um die Grafiken zu zeichnen, verwenden wir ein Skript wie JavaScript. Daher in der Tag ein ID -Attribut für ID muss verwendet werden, das sich an die bezieht Element zum JavaScript. Es kann verwendet werden, um zweidimensionale Grafiken, Bilder, Animationen usw. zu zeichnen. Dieses Schreiben enthält einen umfassenden Leitfaden für die Tag mit Hilfe einiger Code -Snippets.

In diesem Artikel lernen wir die folgenden Konzepte in Bezug auf die Schild:

  • Grundlagen des Tags
  • So erstellen Sie Element
  • So verwenden Sie Canvas mit JavaScript
  • Wie man grundlegende Formen auf Leinwand zeichnet

Lasst uns beginnen!

Grundlagen des Tags

Für jedes Element sind eine ID, Höhe und Breite erforderlich. Das ID -Attribut wird verwendet, um sich auf die Leinwand in JavaScript zu beziehen, während die Höhe und Breite die Größe der Leinwand bestimmen. In einem einzigen HMTL -Dokument können wir mehrere Tags haben.

So erstellen Sie Element

Betrachten wir das untergegebene Snippet, um zu verstehen, wie ein Canvas-Element erstellt wird:

Hier wird ID = Canvas im Skript verwendet, um das Canvas -Element, die Breite und die Höhenattribute zu finden.

So verwenden Sie Canvas mit JavaScript

In diesem Abschnitt werden wir eine Schritt-für-Schritt-Anleitung zur Verwendung des Elements mit JavaScript bereitstellen. Wir müssen den folgenden Schritten ausführen, um fortzufahren:

Zunächst müssen wir das Element und zu diesem Zweck bekommen "GetelementId ()" Die Methode wird wie im folgenden Code -Snippet verwendet:

Als nächstes erstellen wir ein Zeichenobjekt mit einem Build-In-Objekt "GetContext ()" In diesem Objekt werden wir eine Dimension wie zweidimensional angeben, wie in der folgenden Abbildung gezeigt:

var objcontext = kann.getContext ("2d");

Der letzte Schritt besteht darin, auf die Leinwand zu zeichnen, wir werden a angeben "Fillstyle" Eigenschaft, um eine Farbe für die Zeichnung festzulegen:

objcontext.fillstyle = 'grau';

Wie man grundlegende Formen auf Leinwand zeichnet

In diesem Abschnitt wird ein Rechteck, eine Linie und ein Kreis auf Leinwand zeichnen:

Rechteck

Um ein Rechteck auf die Leinwand zu zeichnen, werden wir eine FillRect () -Methode verwenden. Es dauert vier Werte: Erstens für X-Koordinate, zweitens für y-koordinate, dritter für die Breite und den vierten für die Höhe.

objcontext.Fillrect (10,10,175,85);

Hier ist unser komplettes Code -Snippet, um ein Rechteck auf Leinwand zu zeichnen:




Für den obigen Code erhalten wir die folgende Ausgabe:

Wenn wir 10px Speicherplatz für x angeben, koordiniert Y im Ausgang. Der Speicherplatz über die obere und linke Seite überprüft, dass unser Code ordnungsgemäß funktioniert.

Linie

Betrachten wir nun ein weiteres einfaches Beispiel, um zu verstehen, wie man eine Linie auf einer Leinwand zeichnet. Wir verwenden die ziehen nach() Und lineto () Methode zur Angabe der anfänglichen und endgültigen Punkte der Linie. Um die Linie zu zeichnen, müssen wir eine Methode verwenden Schlaganfall() Methode:




Bei einer erfolgreichen Ausführung des Code erhalten wir die folgende Ausgabe:

Auf der Leinwand beginnt eine Linie ab (0, 0) und endet mit (250, 150).

Kreis

Um einen Kreis zu zeichnen, werden wir nutzen beginpath () Und Bogen() Methoden, um einen Weg zu beginnen und einen Kreis zu schaffen. Die ARC.




Mathematik.Die PI -Eigenschaft wird als Endpunkt des Kreises verwendet, und die folgende wird die Ausgabe sein:

In diesem Abschnitt haben wir gelernt, wie man grundlegende Formen auf Leinwand wie Linie, Kreis und Rechteck zeichnet.

Abschluss

Der Das Tag wird verwendet, um Grafiken auf Websites mit JavaScript zu zeichnen und eine Form auf Leinwand zu zeichnen. Vier wesentliche Schritte sind erforderlich i.e. Erstellen Sie Ihre Leinwand und holen Sie das Canvas-Element mit einer Build-In-MethodeGetElementById ()”, Erstellen Sie Ihr Objekt mithilfe getContext () Objekt und schließlich die Formen auf der Leinwand zeichnen. Die erste Hälfte dieses Berichts zeigte, wie man Leinwandelemente erstellt und verwendet, und die zweite Hälfte dieses Tutorials erklärt, wie man grundlegende Formen mit Leinwand wie einer Linie, einem Kreis und einem Rechteck zeichnet.

Golang
Was ist Golang -Testpaket?
Das Golang -Testpaket enthält mehrere Tools und Funktionen, die das Testen, Debuggen und Benchmark -...
Mohamed Flore
Power Shell
Was sind die Schritte, um Remote -Befehle in PowerShell auszuführen??
Die Remote -Befehle können ausgeführt werden, indem das PowerShell -Remoting aktiviert wird. Um das ...
Christopher Lammert
Zwangsversteigerung
Salesforce Apex - Auslöser
Praktisches Tutorial für Salesforce Apex Trigger und die verschiedenen Exmaples, um den Auslöser bei...
Lars Daub
Python
Pandas explodieren mehrere Spalten
Jessica Schimmer
C ++
Array von Strukturen in C ++
Hussein Burkhard
Python
Python Math Exp
Christopher Lammert
Docker
Was ist Docker -Bindungshalterungen?
Christopher Lammert
Java
Was sind Ausdrücke, Aussagen und Blöcke in Java
Kaya Wyludda
Oracle -Datenbank
Wie sich die Oracle -Datenbank vom Oracle SQL -Entwickler unterscheidet?
Fr. Chris Frisch
Power Shell
Was ist umbenannte Befehl in PowerShell umbenannt?
Stephan Harms
C ++
Unterschied zwischen privat und geschützt in C ++
Stephan Harms
c scharf
Bedingungen und wenn dann Aussagen in C#
Christopher Lammert
c scharf
Wie man eine Dezimalzahl in ein Doppel in C# umwandelt
Jessica Schimmer