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.