HTML5 - Tela

O elemento HTML5 <canvas> oferece uma maneira fácil e poderosa de desenhar gráficos usando JavaScript. 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 elemento <canvas> simples que possui apenas dois atributos específicos width e height além de todos os principais atributos HTML5, como id, nome e classe, etc.

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

Você pode encontrar facilmente esse elemento <canvas> no DOM usando o método getElementById () da seguinte maneira -

var canvas = document.getElementById("mycanvas");

Vejamos um exemplo simples de como usar o elemento <canvas> em um documento HTML5.

<!DOCTYPE HTML>

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

Isso produzirá o seguinte resultado -

O contexto de renderização

O <canvas> está inicialmente em branco e, para exibir algo, um script primeiro precisa acessar o contexto de renderização e desenhar nele.

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

A seguir está o código para obter o contexto necessário, juntamente com uma verificação se o seu navegador suporta o elemento <canvas> -

var canvas  = document.getElementById("mycanvas");

if (canvas.getContext) {   
   var ctx = canvas.getContext('2d');   
   // drawing code here   
} else {   
   
   // canvas-unsupported code here 
}

Suporte de navegador

As versões mais recentes do Firefox, Safari, Chrome e Opera oferecem suporte para HTML5 Canvas, mas o IE8 não oferece suporte nativo para canvas.

Você pode usar o ExplorerCanvas para ter suporte de tela por meio do Internet Explorer. Você só precisa incluir este JavaScript da seguinte forma -

<!--[if IE]><script src = "excanvas.js"></script><![endif]-->

Exemplos de tela HTML5

Este tutorial cobre os exemplos a seguir relacionados ao elemento <canvas> HTML5.

Sr. Não. Exemplos e descrição
1 Desenho de retângulos

Aprenda a desenhar retângulo usando o elemento <canvas> HTML5

2 Traçando caminhos

Aprenda a fazer formas usando caminhos no elemento <canvas> HTML5

3 Desenho de linhas

Aprenda a desenhar linhas usando o elemento <canvas> HTML5

4 Desenho Bézier

Aprenda a desenhar a curva de Bézier usando o elemento <canvas> HTML5

5 Desenho Quadrático

Aprenda a desenhar uma curva quadrática usando o elemento <canvas> HTML5

6 Usando imagens

Aprenda a usar imagens com o elemento <canvas> HTML5

7 Criar gradientes

Aprenda a criar gradientes usando o elemento <canvas> HTML5

8 Estilos e Cores

Aprenda a aplicar estilos e cores usando o elemento <canvas> HTML5

9 Texto e fontes

Aprenda a desenhar textos incríveis usando diferentes fontes e seus tamanhos.

10 Padrão e sombra

Aprenda a desenhar diferentes padrões e sombras projetadas.

11 Estados da tela

Aprenda como salvar e restaurar estados da tela ao fazer desenhos complexos em uma tela.

12 Tradução de tela

Este método é usado para mover a tela e sua origem para um ponto diferente na grade.

13 Rotação da Tela

Este método é usado para girar a tela em torno da origem atual.

14 Dimensionamento da tela

Este método é usado para aumentar ou diminuir as unidades em uma grade de tela.

15 Transformação da tela

Esses métodos permitem modificações diretamente na matriz de transformação.

16 Composição da Tela

Este método é usado para mascarar certas áreas ou limpar seções da tela.

17 Animação em tela

Aprenda a criar animação básica usando tela HTML5 e JavaScript.