Mit dem Canvas- Element können wir einen Bereich in unseren HTML5- Dokumenten abgrenzen, in dem wir mithilfe von Javascript Effekte und Bewegungen zeichnen und sogar hinzufügen können.
Das Canvas-Element
Bevor wir mit dem Canvas- Element arbeiten können, definieren wir seine grundlegenden Eigenschaften. Wir haben festgestellt, dass es ein Flow-Element ist, dass es in HTML5 völlig neu ist und die Attribute height für seine Höhe und width für seine Breite sind.
Nachfolgend sehen wir ein kleines Beispiel, wie wir einen Canvas in unserem Dokument definieren können:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style> Leinwand {Rand: mittelschwarz; Margin: 4px} </ style> </ head> <body> <canvas width = "500" height = "200"> Ihr Browser unterstützt das Element <code> canvas </ code> nicht </ canvas> </ body> </ html>
Lassen Sie uns schnell sehen, was in dem Beispiel passiert. Zuerst definieren wir einen Stil, in dem wir einen leicht dicken Rand zuweisen, um unseren leeren Canvas zu unterscheiden. Dann beginnen wir das Canvas-Element mit seiner Anfangsbezeichnung und definieren seine Attribute für Höhe und Breite. Innerhalb der Bezeichnungen platzieren wir eine Nachricht, falls das Dokument vorhanden ist Öffnen Sie mit einem Browser, der diese Standardspezifikation nicht unterstützt.
Mal sehen, wie es in unserem Browser diesen Code aussieht, den wir gerade erklärt haben:
Wie wir im Moment sehen, haben wir nur die in den Stilen definierten Kanten und einen leeren Bereich. Dies bedeutet, dass unser Browser die Verwendung von Canvas unterstützt .
Unsere erste Zeichnung
Wie wir zu Beginn des Tutorials erwähnt haben, müssen wir Javascript verwenden, um Aktionen innerhalb des Canvas zeichnen und ausführen zu können. Dazu verwenden wir eine Methode namens getContext () , die uns in den Kontext des Canvas stellt und mit der wir ihm angeben können, was er anzeigen soll.
Wir können Figuren sowohl in 2D als auch in 3D zeichnen, dazu übergeben wir im Fall der ersten das Argument “2d”.
Sehen wir uns das folgende Beispiel an, um besser zu definieren, was wir erklären:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> <style> Leinwand {Rand: mittelschwarz; Margin: 4px} </ style> </ head> <body> <canvas id = "canvas" width = "500" height = "100"> Ihr Browser unterstützt das Element <code> canvas </ code> nicht </ canvas> <script> var ctx = document.getElementById ("canvas"). getContext ("2d"); ctx.fillRect (10, 10, 50, 50); </ script> </ body> </ html>
Hier haben wir einfach eine ctx- Variable definiert, der wir das document- Objekt zuweisen. Letztere ruft die getContext- Methode auf und wendet sie auf das Canvas-Element an. Dann haben wir die Variable ctx, die eine Methode namens fillRect aufruft. Dabei übergeben wir einige Koordinaten. Wenn wir genau hinschauen, übergeben wir vier Seiten. Lassen Sie uns sehen, was wir im Browser gezeichnet haben:
In diesem Beispiel haben wir ein Quadrat in unsere Zeichenfläche gezeichnet. Es ist nichts Spektakuläres, hilft uns jedoch zu demonstrieren, wie dieses Element in HTML5 funktioniert.