WebGL - Panoramica della tela Html5

Per creare applicazioni grafiche sul Web, HTML-5 fornisce un ricco set di funzionalità come 2D Canvas, WebGL, SVG, trasformazioni CSS 3D e SMIL. Per scrivere applicazioni WebGL, utilizziamo l'elemento canvas esistente di HTML-5. Questo capitolo fornisce una panoramica dell'elemento canvas 2D HTML-5.

HTML5 Canvas

HTML-5 <canvas>fornisce un'opzione facile e potente per disegnare grafica utilizzando JavaScript. Può essere utilizzato per disegnare grafici, creare composizioni fotografiche o fare animazioni semplici (e non così semplici).

Ecco un semplice <canvas> elemento con solo due attributi specifici width e height oltre a tutti i principali attributi HTML-5 come id, name e class.

Sintassi

Di seguito viene fornita la sintassi del tag HTML canvas. Devi menzionare il nome della tela tra virgolette doppie ("").

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

Attributi della tela

Il tag canvas ha tre attributi: id, width e height.

Id- Id rappresenta l'identificatore dell'elemento canvas nel DOM (Document Object Model) .
Width - La larghezza rappresenta la larghezza della tela.
Height - L'altezza rappresenta l'altezza della tela.

Questi attributi determinano la dimensione della tela. Se un programmatore non li specifica sotto il tag canvas, i browser come Firefox, Chrome e Web Kit, per impostazione predefinita, forniscono un elemento canvas di dimensioni 300 × 150.

Esempio: creare una tela

Il codice seguente mostra come creare una tela. Abbiamo usato i CSS per dare un bordo colorato alla tela.

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

All'esecuzione, il codice precedente produrrà il seguente output:

Il contesto di rendering

Il <canvas> è inizialmente vuoto. Per visualizzare qualcosa sull'elemento canvas, dobbiamo usare un linguaggio di scripting. Questo linguaggio di scripting dovrebbe accedere al contesto di rendering e disegnarci sopra.

L'elemento canvas ha un metodo DOM chiamato getContext(), utilizzato per ottenere il contesto di rendering e le sue funzioni di disegno. Questo metodo accetta un parametro, il tipo di contesto2d.

Il codice seguente deve essere scritto per ottenere il contesto richiesto. Puoi scrivere questo script all'interno del tag body come mostrato di seguito.

<!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>

All'esecuzione, il codice precedente produrrà il seguente output:

Per ulteriori esempi su HTML-5 2D Canvas, controlla il seguente link HTML-5 Canvas .

Contesto WebGL

HTML5 Canvas viene utilizzato anche per scrivere applicazioni WebGL. Per creare un contesto di rendering WebGL sull'elemento canvas, è necessario passare la stringaexperimental-webgl, invece di 2d al canvas.getContext()metodo. Alcuni browser supportano solo "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>

All'esecuzione, il codice precedente produrrà il seguente output: