HTML5 Draw Tutorial: Grundlagen des Canvas-Zeichnens

Inhalt

• Bedeutung von Webstandards
• Erstellen einer einfachen HTML5-Webseite
• Hinzufügen des HTML5-Canvas-Elements
• Zeichnen mit JavaScript auf dem HTML5-Canvas
• Beispiel 1: Zeichnen einiger Rechtecke auf der HTML5-Zeichenfläche
• Beispiel 2: Zeichnen eines Smileys auf dem HTML5-Canvas
• Benötige ich closePath ()?
• Wie funktioniert das Zeichnen des Smileys?
• So zeichnen Sie Bögen auf dem HTML5-Canvas
• Weitere HTML5-Tutorials

Simeon Visser ist ein Schriftsteller, der gerne Themen wie Technologie und Reisen behandelt.

In diesem Tutorial werde ich zeigen, wie Sie das Canvas-Element in HTML5 verwenden, um wunderbare Grafiken für Ihre Website zu erstellen. Der HTML5-Webstandard fügt HTML, der Sprache aller Webseiten, einige neue Funktionen hinzu. Eine dieser neuen Funktionen ist das Canvas-Element. Auf der Leinwand können Sie mit JavaScript-Code zeichnen, sodass Sie sehr kreativ mit den angezeigten Elementen umgehen können. Ich werde zwei Beispiele für HTML5-Canvas-Zeichnungen diskutieren, die einige der grundlegenden Zeichenfunktionen verwenden.

Dieses Tutorial richtet sich an Personen, die vielleicht ein wenig über die Funktionsweise von HTML wissen, aber mit dem Canvas-Element nicht vertraut sind. Möglicherweise fangen Sie gerade erst mit der Webentwicklung an oder möchten mehr über das Canvas-Element in HTML5 erfahren. In diesem Tutorial werden alle Schritte durchlaufen, ohne dass zu viel Hintergrundwissen vorausgesetzt wird. Ich empfehle, ein wenig über HTML zu lesen, damit Sie wissen, was ein Element ist und wie HTML-Markup im Allgemeinen aussieht. Wenn etwas unklar ist, hinterlassen Sie bitte unten einen Kommentar.

Bedeutung von Webstandards

Bei so vielen Computern und Webbrowsern, die auf das Internet zugreifen, ist es sehr wichtig, alle vorhandenen Webstandards einzuhalten. Wenn Sie eine Webseite in HTML5 schreiben, möchten Sie in der Tat sicherstellen, dass sie gemäß dem HTML5-Webstandard gültig ist. Mit dem W3C-Validator können Sie sicherstellen, dass Ihre Webseite tatsächlich eine HTML5-Webseite ist. Aus diesem Grund beginnen wir mit einer einfachen, leeren HTML5-gültigen Webseite und fügen dann alle Dinge hinzu, die zum Zeichnen auf der Leinwand erforderlich sind.

Erstellen einer einfachen HTML5-Webseite

Der erste Schritt besteht darin, eine einfache HTML-Datei mit HTML5-Code zu erstellen. Dies ist unsere leere HTML5-Seite. In den nächsten Schritten dieses Tutorials fügen wir die Zeichenfläche und den JavaScript-Code hinzu, um etwas zu zeichnen.

Folgendes müssen Sie tun:

• Öffnen Sie einen Texteditor.
• Kopieren Sie den folgenden Code und fügen Sie ihn in eine neue Datei ein
• Speichern Sie die Datei als einfache Textdatei und geben Sie ihr einen Namen, der auf .html endet (stellen Sie sicher, dass es sich um name.html und nicht um name.html.txt handelt. Wenn dies der Fall ist, müssen Sie sie umbenennen und erneut öffnen Ihr Texteditor).

Wenn Sie Windows verwenden, sollten Sie entweder NotePad oder WordPad verwenden, jedoch nicht Microsoft Word. Der Grund dafür ist, dass Sie Ihre Arbeit als einfache Textdatei speichern möchten, nicht mit zusätzlichen Informationen. Wenn Sie GNU / Linux oder Mac OS X verwenden, verwenden Sie einfach Ihren bevorzugten Texteditor, mit dem Sie auf einfache Weise grundlegende Textdateien erstellen und speichern können. Es ist sogar noch besser, einen dieser Programmier-Texteditoren zu verwenden, die zusätzliche Funktionen für Programmierer und Webentwickler bieten. Aber keine Sorge: Sie können eine davon später jederzeit herunterladen, wenn Sie sich mehr mit Webentwicklung und Computerprogrammierung beschäftigen.

Hier ist eine leere HTML5-Webseite:

! DOCTYPE html> html> head> meta http-equiv = "Inhaltstyp" content = "text / html; charset = UTF-8"> title> HTML5-Tutorial: Grundlagen der Leinwandzeichnung / title> / head> body> / body> / html>

Öffnen Sie diese Datei in Ihrem Webbrowser. Sie sollten eine leere Seite sehen und der Titel der Webseite lautet "HTML5 Tutorial: Grundlagen des Leinwandzeichnens". Wenn Sie dies sehen können, haben Sie erfolgreich eine HTML5-Webseite erstellt.

Wenn Sie HTML oder Computercode schreiben, ist es wichtig, regelmäßig zu überprüfen, ob Sie es richtig machen. Sie schreiben ein paar Codebits und prüfen dann, ob die Webseite so aussieht, wie Sie es möchten. Wenn dies der Fall ist, können Sie mit dem nächsten Schritt fortfahren. Wenn dies nicht der Fall ist, können Sie das Problem sofort beheben.

Jede HTML-Webseite besteht aus einem HTML-Element und darin befinden sich ein Kopfelement und ein Körperelement. Im Kopf finden Sie alle Arten von Informationen, die nicht Teil der Seite selbst sind, aber dennoch benötigt werden, z. B. den Titel oder Links zu anderen Dateien (wie CSS- und JavaScript-Dateien). Im Moment verwenden wir nur das title-Element. Wie Sie sehen, ist das body-Element leer und deshalb gibt es nichts auf der Webseite! Wir werden jetzt das Canvas-Element hinzufügen, mit dem wir auf diesen Teil der Webseite zeichnen können.

Hinzufügen des HTML5-Canvas-Elements

Sie können ein Canvas-Element hinzufügen, indem Sie dem body-Element der obigen HTML5-Webseite Folgendes hinzufügen:

canvas id = "mycanvas" width = "300" height = "300"> / canvas>

Was bedeutet das? Dies bedeutet, dass Sie ein Canvas-Element mit den Attributen ID, Breite und Höhe definieren. Diese werden alle für dieses Tutorial benötigt. Sie müssen die Breite und Höhe der Leinwand in Pixel angeben, damit der Webbrowser weiß, wie groß die Leinwand ist. Wenn Sie die Abmessungen der Leinwand nicht angeben, beträgt die Standardbreite 300 Pixel und die Standardhöhe 150 Pixel. In unserem Tutorial benötigen wir eine größere Leinwand, daher verwenden wir eine Breite von 300 und eine Höhe von 300.

Die ID wird als Bezeichner benötigt, damit wir in unserem JavaScript-Code auf die Zeichenfläche verweisen können. Diese ID muss auf Ihrer Webseite eindeutig sein - Sie können kein anderes Element mit derselben ID haben.

Ihre HTML5-Webseite sollte jetzt folgendermaßen aussehen:

! DOCTYPE html> html> head> meta http-equiv = "Inhaltstyp" content = "text / html; charset = UTF-8"> title> HTML5-Tutorial: Grundlagen der Leinwandzeichnung / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / canvas> / body> / html>

Wenn Sie die Webseite jetzt in Ihrem Browser anzeigen, sehen Sie keinen Unterschied zu dem, wie die Webseite zuvor ausgesehen hat. Es ist immer noch eine weiße leere Webseite. Das liegt daran, dass wir noch nichts auf die Leinwand gezeichnet haben: Die Leinwand ist da, aber die Hintergrundfarbe ist standardmäßig weiß, sodass Sie sie noch nicht sehen können.

Es ist Zeit, auf die Leinwand zu zeichnen!

Zeichnen mit JavaScript auf dem HTML5-Canvas

Um auf der HTML5-Zeichenfläche zu zeichnen, müssen Sie einen JavaScript-Code schreiben, der angibt, was gezeichnet werden muss. JavaScript ist eine bekannte Skriptsprache für das Web und wurde für viele Dinge wie interaktive Websites und Webanwendungen verwendet.

Folgendes müssen wir tun: Wir müssen einen Weg finden, auf das Canvas-Element zu verweisen, und dann müssen wir einige Befehle schreiben, um auf die Canvas zu zeichnen. Wir tun dies, indem wir einen sogenannten Zeichenkontext der Leinwand erhalten. Wir können den Kontext verwenden, um einige Befehle auszuführen, die angeben, was gezeichnet werden muss.

Schauen Sie sich Folgendes an und stellen Sie sicher, dass Ihre Webseite auch so aussieht:

! DOCTYPE html> html> head> meta http-equiv = "Inhaltstyp" content = "text / html; charset = UTF-8"> title> HTML5-Tutorial: Grundlagen der Leinwandzeichnung / title> / head> body> canvas id = "mycanvas" width = "300" height = "300"> / canvas> script type = "text / javascript"> var canvas = document.getElementById ('mycanvas'); var ctx = canvas.getContext ('2d'); / script> / body> / html>

Wir haben JavaScript mit zwei Codezeilen hinzugefügt. In der ersten Zeile wird eine Variable namens canvas erstellt, die das Canvas-Element enthält. Wenn Sie eine andere ID verwendet haben, sollten Sie auch diese Zeile ändern. Die Funktion getElementById gibt Ihnen das Element im HTML-Dokument mit dieser ID. Daher ist es wichtig, dass Sie nach dem Element mit der ID der Zeichenfläche suchen. Die zweite Zeile gibt uns eine Variable ctx mit dem Zeichnungskontext des Canvas-Elements. In diesem Fall handelt es sich um den 2D-Zeichnungskontext, da zweidimensionale Zeichnungen erstellt werden.

Beispiel 1: Zeichnen einiger Rechtecke auf der HTML5-Zeichenfläche

Beginnen wir mit etwas Einfachem - nur ein paar Rechtecken! Fügen Sie dem JavaScript-Code Ihrer Webseite den folgenden Code hinzu:

ctx.strokeStyle = "rgb (0, 0, 255)"; ctx.strokeRect (10, 10, 50, 50); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (30, 30, 50, 50);

Um den obigen Code zu verstehen, müssen wir den Unterschied zwischen Streicheln und Füllen kennen. Wenn Sie streichen, zeichnen Sie einfach den Umriss des Rechtecks ​​und wenn Sie füllen, färben Sie auch die Innenseite des Rechtecks. Um die Farbe zu ändern, in der Sie streichen oder füllen, müssen Sie den Strichstil oder den Füllstil ändern. Danach können Sie StrokeRect oder fillRect aufrufen, um das Rechteck an einer bestimmten Stelle zu streichen oder zu füllen.

Sie können eine Farbe mithilfe des RGB-Farbmodells angeben (red / Green / blue) oder Sie können Hex-Werte verwenden. Ich habe mich für das RGB-Farbmodell entschieden, weil es leichter zu verstehen ist, obwohl der Hex-Wert genau gleich funktioniert (aber wir können uns das zu einem anderen Zeitpunkt ansehen). Für RGB müssen Sie angeben, wie viel Rot, Grün und Blau zum Erstellen der Farbe verwendet werden sollen (daher drei anzugebende Werte). Die Werte liegen zwischen 0 und 255, wobei 0 nichts von dieser Farbe und 255 alles von dieser Farbe bedeutet. Sie können sich ein rotes, ein grünes und ein blaues Licht vorstellen, die bis zu einem gewissen Grad eingeschaltet sind und zusammen die Farbe erzeugen. Dies bedeutet, dass die Farbe (0, 0, 0) schwarz ist, während (255, 255, 255) weiß ist.

Die Werte, die StrokeRect und FillRect benötigen, sind die x-Koordinate, die y-Koordinate, die Breite und die Höhe des Rechtecks. Diese werden als Argumente von StrokeRect und FillRect bezeichnet. Dies sind nicht unbedingt Pixel, aber sie befinden sich im Koordinatensystem des Zeichnungskontexts. Die obere linke Ecke ist (0, 0), wobei die x-Achse die horizontale Achse und die y-Achse die vertikale Achse ist. Zum Beispiel bedeutet eine höhere x-Koordinate, dass Sie sich mehr nach rechts bewegt haben, und eine höhere y-Koordinate bedeutet, dass Sie sich mehr nach unten bewegt haben.

In den ersten beiden Zeilen streichen wir ein Rechteck in der Farbe Blau und in den letzten beiden Zeilen füllen wir ein Rechteck in der Farbe Rot. Es sollte so aussehen:

In ähnlicher Weise erzeugt der folgende Code vier gefüllte Rechtecke in den Farben Rot, Grün, Blau und Gelb. Entfernen Sie einfach den vorherigen Code und ersetzen Sie ihn durch den folgenden:

ctx.fillStyle = "rgb (255, 0, 0)"; ctx.fillRect (10, 10, 50, 50); ctx.fillStyle = "rgb (0, 255, 0)"; ctx.fillRect (35, 35, 50, 50); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.fillRect (100, 10, 100, 100); ctx.fillStyle = "rgb (255, 255, 0)"; ctx.fillRect (120, 30, 20, 20);

Es wird so aussehen:

Beispiel 2: Zeichnen eines Smileys auf dem HTML5-Canvas

Wir können nun zu einer etwas komplexeren Zeichnung mit Kreisen und Bögen übergehen. Wir werden ein Smiley-Gesicht zeichnen, das im Grunde nichts anderes als ein paar farbige Kreise an den richtigen Positionen ist. Ich werde Ihnen zuerst den Code geben und dann genauer erklären, was los ist. Entfernen Sie einfach den Zeichnungscode des vorherigen Beispiels und ersetzen Sie ihn durch den folgenden:

ctx.beginPath (); ctx.arc (150, 150, 100, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 0, 0)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (120, 130, 20, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (123, 133, 4, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (180, 130, 20, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (183, 133, 4, 0, 2 * Math.PI, false); ctx.closePath (); ctx.fillStyle = "rgb (0, 0, 255)"; ctx.stroke (); ctx.fill (); ctx.beginPath (); ctx.arc (155, 165, 60, 0, 3, falsch); ctx.closePath (); ctx.lineWidth = 5; ctx.strokeStyle = "rgb (255, 255, 0)"; ctx.fillStyle = "rgb (255, 255, 255)"; ctx.stroke (); ctx.fill ();

Benötige ich closePath ()?

Es ist etwas komplexer. Sie benötigen nicht immer closePath (), wenn Sie füllen oder streicheln, da diese Befehle auch den Pfad schließen. Sie können auch Folgendes tun, um einen Kreis zu erhalten:

ctx.beginPath (); ctx.arc (...); ctx.fillStyle = ... ctx.fill ();

Wie funktioniert das Zeichnen des Smileys?

Was machen all diese beginPath- und closePath-Befehle dort? Schauen wir uns zunächst fillRect des vorherigen Beispiels genauer an. Es ist wichtig zu wissen, dass dieser Befehl zwei Dinge tut: Er erstellt das Rechteck, füllt es aber auch in einer bestimmten Farbe. Sie möchten diese Dinge nicht immer zusammen tun. Wenn Sie eine benutzerdefinierte Form erstellen, möchten Sie möglicherweise zuerst die gesamte Zeichnung erstellen und sie dann streichen oder füllen. Das machen wir hier. Alle Zeichenbefehle zusammen werden als Pfad bezeichnet. Danach entscheiden wir, wie der Pfad angezeigt werden soll (durch Streicheln oder Füllen).

Der erste Bogen wird verwendet, um das rote Gesicht zu zeichnen, die nächsten vier Bogenbefehle werden verwendet, um die weißen Augen mit blauen Pupillen zu zeichnen, und der letzte Bogen wird verwendet, um den Mund zu zeichnen. Beachten Sie, wie wir diesen Bogen streicheln und füllen: Auch wenn wir keinen vollen Kreis zeichnen, können wir ihn dennoch mit einer Farbe füllen und so den Mund erzeugen.

Wenn Sie mit beginPath einen Pfad erstellen, können Sie alle Arten von Zeichenbefehlen ausführen, um Ihre benutzerdefinierte Form zu erstellen. Sie können den Pfad dann mit closePath schließen. Wir geben dann den Strich- oder Füllstil an und führen dann einige Strich- oder Füllbefehle aus, um die Form zu zeichnen. Sie können auch zuerst die Stile angeben und dann den Pfad erstellen. Die Strich- und Füllbefehle müssen immer an letzter Stelle stehen, da sie den Strich- und Füllstil sowie den gerade erstellten Pfad verwenden.

So zeichnen Sie Bögen auf dem HTML5-Canvas

Wir werden den Befehl arc verwenden, um Kreise oder Teile von Kreisen zu erstellen. Um einen Bogen zu zeichnen, müssen Sie seine x-Koordinate, seine y-Koordinate, seinen Radius, den Startwinkel, den Endwinkel und angeben, ob Sie gegen den Uhrzeigersinn zeichnen möchten oder nicht. Der Radius gibt an, wie groß der Bogen oder Kreis sein kann (der mathematische Radius eines Kreises). Die Start- und Endwinkel geben an, wo Sie mit dem Zeichnen des Bogens beginnen möchten und wo Sie das Zeichnen des Bogens beenden möchten. Dies ist nützlich, wenn Sie keinen vollen Kreis, sondern nur einen halben Kreis zeichnen. Schließlich müssen Sie angeben, ob Sie gegen den Uhrzeigersinn zeichnen möchten oder nicht (wahr, wenn Sie möchten, und falsch, wenn Sie dies nicht möchten).

Die Start- und Endwinkel des Bogens werden im Bogenmaß angegeben, das vom 0- bis zum 2-fachen der mathematischen Konstante pi reicht. Der Wert 0 für den Startwinkel bedeutet, dass Sie im Osten beginnen (an der 3-Uhr-Position einer Uhr), und ein Endwinkel von 2 * pi bedeutet, dass Sie einen vollen Kreis zeichnen möchten (Sie möchten einen Bogen von 2 * pi im Bogenmaß, das ist also ein voller Kreis).

Wenn Sie beispielsweise einen Halbkreis möchten, haben Sie einen Startwinkel von 0 und einen Endwinkel von pi anstelle von 2 * pi. Dieser Halbkreis wäre die untere Hälfte eines Kreises. Wenn Sie die obere Hälfte wollen, müssen Sie einen Startwinkel von pi und einen Endwinkel von 2 * pi haben.

Beispielsweise wäre ein Kreis bei (100, 100) mit einem Radius von 50, der von Osten (0) zu zeichnen beginnt und einen vollen Kreis (2 * pi) im Uhrzeigersinn zeichnet (falsch für gegen den Uhrzeigersinn), ctx. Bogen (100, 100, 50, 0, Math.PI * 2, falsch); Versuchen Sie, mit dem Start- und Endwinkel zu spielen, um eine Vorstellung davon zu bekommen, welche Werte sie haben sollten, wenn Sie keinen vollen Kreis zeichnen möchten.

Beachten Sie, dass ich für den letzten Bogen einen Wert von 3 anstelle von pi (3.14 ...) verwende, das ist also etwas weniger als ein Halbkreis. Dies schafft eine nette Geste für den Mund des Smileys. Beachten Sie, dass ich auch die Linienbreite spezifiziere, die offensichtlich die Breite der Linie um den Mund ändert. Dieser Wert für lineWidth wird beim Streicheln verwendet.

Wie bin ich auf alle Werte für die Koordinaten und Winkel gekommen? Ich habe nur eine Weile rumgespielt, bis ich das bekommen habe, was ich wollte. Wenn Sie mit dem Koordinatensystem und den Winkeln vertraut sind, wissen Sie, welche Änderungen Sie vornehmen müssen, um die Augen zu bewegen oder den Mund größer zu machen.

Weitere HTML5-Tutorials

• HTML5-Tutorial: Zeichnen von Kreisen und Bögen
  Das Zeichnen von Kreisen und Bögen in HTML5 kann eine ziemliche Herausforderung sein. In diesem Tutorial erkläre ich, wie man Kreise und Bögen zeichnet und wie die Winkel von Bögen gemessen werden. Dieses Tutorial enthält viele Beispiele.
• HTML5 Tutorial: Textzeichnung mit ausgefallenen Farben und Effekten
  Sie können viel mehr als nur Text in HTML5 zeichnen! In diesem Tutorial werde ich verschiedene Effekte zeigen, um einige ausgefallene Texte zu erstellen, einschließlich Schatten, Verläufe und Rotation.

Dieser Artikel ist genau und nach bestem Wissen des Autors. Der Inhalt dient nur zu Informations- oder Unterhaltungszwecken und ersetzt nicht die persönliche Beratung oder professionelle Beratung in geschäftlichen, finanziellen, rechtlichen oder technischen Angelegenheiten.