O HTML5 <canvas> tag

A nova marca é um HTML5 <canvas> tag não está presente nas versões anteriores, o que pode ser usado para desenhar e trabalhar com gráficos.

O <canvas> tag precisa de um apoio linguagem de script, como JavaScript para funcionar corretamente e realizar plenamente o seu potencial.

O objetivo deste artigo é ilustrar o uso básico das tags novo, mas alguns pontos avançados pelo uso constante de exemplos práticos, espero, irá facilitar a aprendizagem.

Premissa

Como uma novidade absoluta no melhor lona não é suportado por todos os navegadores, então é possível que os exemplos de demonstração neste artigo não são exibidos corretamente.
O teste foi realizado com o Google Chrome, em que você ainda não experimentou qualquer problema.

Use a tag <canvas>

O uso comum da tag Canvas é bem simples e não diferente de outros tags HTML.
Formalmente Canvas é um recipiente simples e, como tal, tem uma tag de abertura (<canvas>) e de fechamento (</ Canvas>):

 <canvas id="esempio" width="196" height="96">

 





 Elemento não é suportado







 </ Canvas>

Se as dimensões não são indicados explicitamente (usando a largura e altura atributos) o tamanho atribuído ao recipiente é o padrão, um retângulo básico com altura 300 e 150.
O atributo id, é claro, não é essencial, mas, na minha opinião, é sempre uma boa idéia para chamar a ter uma referência única para cada objeto que está sendo usado na página.

A parte de texto delimitado por <canvas> e </ canvas> para representar a nota indica que o gráfico não é suportado pelo seu navegador.

Antes de iniciar com os detalhes da implementação testar o potencial de lona com um código simples para testar ao vivo:

 <canvas id="bandierina" width="180" height = "100"> Não suportado </ Canvas>







 <script type="text/javascript">







 var canvas = document.getElementById ('flag');







 var c = canvas.getContext ('2 d ');







 c.fillStyle = '# FF0000';







 c.fillRect (0,0,180,100);







 c.fillStyle = "# FFFFFF";







 c.fillRect (0,0,120,100);







 c.fillStyle = '# 00FF00';







 c.fillRect (0,0,60,100);







 </ Script>

Em desta página você pode ver o resultado deste código (para ver a saída corretamente, você deve ter, mais uma vez, um browser que suporte HTML 5).

Como já anunciado no início do artigo nesta seção do código é explícito o facto de que o trabalho canvas usando um script. A partir deste exemplo podemos notar imediatamente a técnica padrão para extrair o objeto variáveis ​​de fundo da tela:

 / / Cria o item de lona por ID







 var canvas = document.getElementById ('flag');









 / / Cria um objeto bidimensional novo na tela







 var c = canvas.getContext ('2 d ');

Javascript método getElementById armazena o objeto em uma tela variável, através do valor de seu campo id; getContext ('2 d ') leva o contexto, ou um objeto que oferece ao programador uma série de métodos para trabalhar com a tela como desejado (no nosso caso, você quer trabalhar com as funções de gráficos bidimensionais, ou seja, 2D).

Nas páginas seguintes vamos listar algumas operações básicas úteis para o programador tem a intenção de fazer uso da tela.

• <<
• 1
• 2
• 3
• 4
• 5
• >>