WebGL - Visão geral da tela Html5

Para criar aplicativos gráficos na web, o HTML-5 oferece um rico conjunto de recursos, como 2D Canvas, WebGL, SVG, transformações 3D CSS e SMIL. Para escrever aplicativos WebGL, usamos o elemento canvas existente do HTML-5. Este capítulo fornece uma visão geral do elemento de tela 2D do HTML-5.

HTML5 Canvas

HTML-5 <canvas>fornece uma opção fácil e poderosa para desenhar gráficos usando JavaScript. Ele pode ser usado para desenhar gráficos, fazer composições de fotos ou fazer animações simples (e não tão simples).

Aqui está um simples <canvas> elemento tendo apenas dois atributos específicos width e height além de todos os atributos principais do HTML-5 como id, nome e classe.

Sintaxe

A sintaxe da tag de tela HTML é fornecida abaixo. Você deve mencionar o nome da tela entre aspas duplas (“”).

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

Atributos da tela

A tag canvas tem três atributos, a saber, id, largura e altura.

Id- Id representa o identificador do elemento canvas no Document Object Model (DOM) .
Width - Largura representa a largura da tela.
Height - A altura representa a altura da tela.

Esses atributos determinam o tamanho da tela. Se um programador não os estiver especificando na tag canvas, navegadores como Firefox, Chrome e Web Kit, por padrão, fornecem um elemento canvas de tamanho 300 × 150.

Exemplo - Criar uma tela

O código a seguir mostra como criar uma tela. Usamos CSS para dar uma borda colorida à tela.

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

Ao ser executado, o código acima produzirá a seguinte saída -

O contexto de renderização

O <canvas> está inicialmente em branco. Para exibir algo no elemento canvas, temos que usar uma linguagem de script. Esta linguagem de script deve acessar o contexto de renderização e desenhar nele.

O elemento canvas tem um método DOM chamado getContext(), que é usado para obter o contexto de renderização e suas funções de desenho. Este método usa um parâmetro, o tipo de contexto2d.

O código a seguir deve ser escrito para obter o contexto necessário. Você pode escrever este script dentro da tag body conforme mostrado abaixo.

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

Ao ser executado, o código acima produzirá a seguinte saída -

Para obter mais exemplos sobre HTML-5 2D Canvas, verifique o seguinte link HTML-5 Canvas .

Contexto WebGL

O HTML5 Canvas também é usado para escrever aplicativos WebGL. Para criar um contexto de renderização WebGL no elemento canvas, você deve passar a stringexperimental-webgl, ao invés de 2d ao canvas.getContext()método. Alguns navegadores suportam apenas '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>

Ao ser executado, o código acima produzirá a seguinte saída -