Um grafische Anwendungen im Web zu erstellen, bietet HTML5 eine Vielzahl von Funktionen wie 2D Canvas, WebGL, SVG oder SMIL. Um WebGL-Anwendungen zu schreiben, verwenden wir das vorhandene Canvas-Element von HTML 5. Dieser Beitrag gibt einen Überblick über das 2D Canvas Element in HTML5.
HTML5 Canvas bietet eine einfache und leistungsfähige Option zum Zeichnen von Grafiken mit JavaScript. Es kann verwendet werden, um Grafiken zu zeichnen oder Farbkompositionen oder einfach Animationen zu erstellen.
Hier ist ein einfaches canvas Element, das nur zwei spezifische Attribute Breite und Höhe plus alle Kern HTML5 Attribute wie Identifikation, Name und Kategorie hat.
Syntax
Die Syntax des HTML-Canvas-Tags ist unten angegeben. Sie müssen den Namen des Canvas in doppelten Zitaten (“ “) erwähnen.
Canvas Attribute
Der Canvas-Tag hat drei Attribute, nämlich id, width und height.
Diese Attribute bestimmen die Größe des Canvas. Wenn ein Programmierer sie nicht unter dem Canvas-Tag angibt, stellen Browser wie Firefox, Chrome und WebKit standardmäßig ein Canvas-Element der Größe 300 x 150 zur Verfügung.
Beispiel – Erstellen eines Canvas.
Der folgende Code zeigt, wie man ein Canvas erstellt. Wir haben CSS verwendet, um dem Canvas einen farbigen Rahmen zu geben.
HTML Kontext (Rendering)
Der canvas ist zunächst leer. Um etwas auf dem Canvas-Element darzustellen, müssen wir eine Skriptsprache verwenden. Diese Skriptsprache sollte auf den Rendering-Kontext zugreifen und darauf aufbauen.
Das Canvas-Element hat eine DOM-Methode mit der Bezeichnung getContext(), die verwendet wird, um den Renderingkontext und seine Zeichenfunktionen zu erhalten. Diese Methode nimmt einen Parameter, den Typ des Contexts 2D.
Der folgende Code soll geschrieben werden, um den gewünschten Kontext zu erhalten. Sie können dieses Skript in den Body-Tag schreiben, wie unten gezeigt.
WebGL Kontext
HTML5 Canvas wird auch zum Schreiben von WebGL-Anwendungen verwendet. Um einen WebGL-Renderingkontext auf dem Canvas-Element zu erstellen, übergeben Sie die Zeichenkette experimental WebGL anstelle von 2D an die Methode canvas.getContext(). Einige Browser unterstützen nur WebGL.
WebGL Kontext
HTML5 Canvas wird auch zum Schreiben von WebGL-Anwendungen verwendet. Um einen WebGL-Renderingkontext auf dem Canvas-Element zu erstellen, übergeben Sie die Zeichenkette experimental WebGL anstelle von 2D an die Methode canvas.getContext(). Einige Browser unterstützen nur WebGL.
Vielen Dank fürs Lesen.