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.

Sqlite
Kann ich SQLite online verwenden??
Ja, Sie können SQLite online über die SQLite Viewer -Web -App, die Erweiterung der Klasse oder das A...
Lars Daub
C ++
So deklarieren Sie Variablen in C++?
Um eine Variable in C ++ zu deklarieren, müssen Sie ihren Datentyp und den Namen angeben. Weitere In...
Gian Eisenlauer
c scharf
Wie man Polymorphismus in C# verwendet
Polymorphismus ermöglicht es, Objekte verschiedener Klassen zu behandeln, als wären sie aus derselbe...
Arved Riermeier
Python
Pandas explodieren mehrere Spalten
Jessica Schimmer
Python
Numpy Save Dict
Lars Daub
Php
Was ist ein undefinierter Indexfehler in PHP und wie man ihn behebt??
Christopher Lammert
AWS
So verwenden Sie Instanzlebenszyklus in AWS?
Hussein Burkhard
Php
So verwenden Sie die PHP -STRCMP -Funktion
Stephan Harms
Docker
So verwenden Sie den Befehl „Docker Copy“, um eine Datei von einem Docker -Container auf den Host -Computer zu übertragen?
Hussein Burkhard
Oracle Linux
Was sind die Unterschiede zwischen Oracle Linux und Ubuntu Linux??
Kaya Wyludda
Oracle Linux
Was sollte minimale Systemspezifikationen für Oracle Linux sein?
Mohamed Flore
Docker
Wie kann ich Docker über Ubuntu Terminal installieren??
Stephan Harms
Power Shell
Was sind die Schritte, um Windows PowerShell zu starten?
Mohamed Flore