WebGL - Présentation du canevas Html5

Pour créer des applications graphiques sur le Web, HTML-5 fournit un riche ensemble de fonctionnalités telles que 2D Canvas, WebGL, SVG, les transformations CSS 3D et SMIL. Pour écrire des applications WebGL, nous utilisons l'élément canvas existant de HTML-5. Ce chapitre donne un aperçu de l'élément de canevas 2D HTML-5.

Toile HTML5

HTML-5 <canvas>fournit une option simple et puissante pour dessiner des graphiques à l'aide de JavaScript. Il peut être utilisé pour dessiner des graphiques, créer des compositions photo ou faire des animations simples (et pas si simples).

Voici un simple <canvas> élément n'ayant que deux attributs spécifiques width et height ainsi que tous les attributs HTML-5 de base tels que l'identifiant, le nom et la classe.

Syntaxe

La syntaxe de la balise HTML canvas est donnée ci-dessous. Vous devez mentionner le nom du canevas entre guillemets doubles («»).

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

Attributs du canevas

La balise canvas a trois attributs à savoir, id, width et height.

Id- Id représente l'identifiant de l'élément canvas dans le Document Object Model (DOM) .
Width - La largeur représente la largeur de la toile.
Height - La hauteur représente la hauteur de la toile.

Ces attributs déterminent la taille du canevas. Si un programmeur ne les spécifie pas sous la balise canvas, les navigateurs tels que Firefox, Chrome et Web Kit fournissent par défaut un élément canvas de taille 300 × 150.

Exemple - Créer un canevas

Le code suivant montre comment créer un canevas. Nous avons utilisé CSS pour donner une bordure colorée à la toile.

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

Lors de l'exécution, le code ci-dessus produira la sortie suivante -

Le contexte de rendu

Le <canvas> est initialement vide. Pour afficher quelque chose sur l'élément canvas, nous devons utiliser un langage de script. Ce langage de script doit accéder au contexte de rendu et s'inspirer de celui-ci.

L'élément canvas a une méthode DOM appelée getContext(), qui est utilisé pour obtenir le contexte de rendu et ses fonctions de dessin. Cette méthode prend un paramètre, le type de contexte2d.

Le code suivant doit être écrit pour obtenir le contexte requis. Vous pouvez écrire ce script dans la balise body comme indiqué ci-dessous.

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

Lors de l'exécution, le code ci-dessus produira la sortie suivante -

Pour plus d'exemples sur HTML-5 2D Canvas, consultez le lien suivant HTML-5 Canvas .

Contexte WebGL

HTML5 Canvas est également utilisé pour écrire des applications WebGL. Pour créer un contexte de rendu WebGL sur l'élément canvas, vous devez passer la chaîneexperimental-webgl, au lieu de 2d à la canvas.getContext()méthode. Certains navigateurs ne prennent en charge que "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>

Lors de l'exécution, le code ci-dessus produira la sortie suivante -