WebGL - Html5 Canvas Übersicht

Um grafische Anwendungen im Web zu erstellen, bietet HTML-5 eine Vielzahl von Funktionen wie 2D-Canvas, WebGL, SVG, 3D-CSS-Transformationen und SMIL. Zum Schreiben von WebGL-Anwendungen verwenden wir das vorhandene Canvas-Element von HTML-5. Dieses Kapitel bietet einen Überblick über das HTML-5 2D-Canvas-Element.

HTML5 Canvas

HTML-5 <canvas>bietet eine einfache und leistungsstarke Option zum Zeichnen von Grafiken mit JavaScript. Es kann verwendet werden, um Grafiken zu zeichnen, Fotokompositionen zu erstellen oder einfache (und nicht so einfache) Animationen zu erstellen.

Hier ist eine einfache <canvas> Element mit nur zwei spezifischen Attributen width und height plus alle HTML-5-Kernattribute wie ID, Name und Klasse.

Syntax

Die Syntax des HTML-Canvas-Tags ist unten angegeben. Sie müssen den Namen der Leinwand in doppelten Anführungszeichen ("") angeben.

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

Canvas-Attribute

Das Canvas-Tag verfügt über drei Attribute: ID, Breite und Höhe.

Id- ID repräsentiert die Kennung des Canvas-Elements im Document Object Model (DOM) .
Width - Breite repräsentiert die Breite der Leinwand.
Height - Die Höhe entspricht der Höhe der Leinwand.

Diese Attribute bestimmen die Größe der Zeichenfläche. Wenn ein Programmierer sie nicht unter dem Canvas-Tag angibt, stellen Browser wie Firefox, Chrome und Web Kit standardmäßig ein Canvas-Element der Größe 300 × 150 bereit.

Beispiel - Erstellen Sie eine Leinwand

Der folgende Code zeigt, wie Sie eine Zeichenfläche erstellen. Wir haben CSS verwendet, um der Leinwand einen farbigen Rand zu geben.

<html>
   <head>
      <style>
         #mycanvas{border:1px solid red;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "100" height = "100"></canvas>
   </body>
</html>

Bei der Ausführung erzeugt der obige Code die folgende Ausgabe:

Der Rendering-Kontext

Das <canvas> ist anfangs leer. Um etwas auf dem Canvas-Element anzuzeigen, müssen wir eine Skriptsprache verwenden. Diese Skriptsprache sollte auf den Renderkontext zugreifen und darauf zurückgreifen.

Das Canvas-Element verfügt über eine aufgerufene DOM-Methode getContext(), mit dem der Renderkontext und seine Zeichenfunktionen abgerufen werden. Diese Methode verwendet einen Parameter, den Kontexttyp2d.

Der folgende Code muss geschrieben werden, um den erforderlichen Kontext zu erhalten. Sie können dieses Skript wie unten gezeigt in das Body-Tag schreiben.

<!DOCTYPE HTML>
<html>
   <body>
      <canvas id = "mycanvas" width = "600" height = "200"></canvas>

      <script>
         var canvas = document.getElementById('mycanvas');
         var context = canvas.getContext('2d');
			
         context.font = '20pt Calibri';
         context.fillStyle = 'green';
         context.fillText('Welcome to Tutorialspoint', 70, 70);
      </script>
   </body>
</html>

Bei der Ausführung erzeugt der obige Code die folgende Ausgabe:

Weitere Beispiele zu HTML-5 2D Canvas finden Sie unter folgendem Link HTML-5 Canvas .

WebGL-Kontext

HTML5 Canvas wird auch zum Schreiben von WebGL-Anwendungen verwendet. Um einen WebGL-Rendering-Kontext für das Canvas-Element zu erstellen, müssen Sie die Zeichenfolge übergebenexperimental-webgl, Anstatt von 2d zum canvas.getContext()Methode. Einige Browser unterstützen nur 'webgl'.

<!DOCTYPE html>
<html>
   <canvas id = 'my_canvas'></canvas>
	
   <script>
      var canvas = document.getElementById('my_canvas');
      var gl = canvas.getContext('experimental-webgl');
      gl.clearColor(0.9,0.9,0.8,1);
      gl.clear(gl.COLOR_BUFFER_BIT);
   </script>
</html>

Bei der Ausführung erzeugt der obige Code die folgende Ausgabe: