Tutorial de tela HTML
O elemento HTML <canvas> é usado para desenhar gráficos em uma página da web.
O gráfico acima é criado com <canvas>.
Ele mostra quatro elementos: um retângulo vermelho, um retângulo de gradiente, um retângulo multicolorido e um texto multicolorido.
O que é HTML Canvas?
O elemento HTML <canvas> é usado para desenhar gráficos, em tempo real, via script (geralmente JavaScript).
O elemento <canvas> é apenas um container para gráficos. Você deve usar um script para realmente desenhar os gráficos.
O Canvas tem vários métodos para desenhar caminhos, caixas, círculos, texto e adicionar imagens.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento <canvas>.
| Element | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
HTML Canvas pode desenhar texto
O Canvas pode desenhar texto colorido, com ou sem animação.
HTML Canvas pode desenhar gráficos
O Canvas possui ótimos recursos para apresentação de dados gráficos com imagens de gráficos e tabelas.
Tela HTML pode ser animada
Objetos de tela podem se mover. Tudo é possível: desde simples bolas saltitantes até animações complexas.
HTML Canvas pode ser interativo
O Canvas pode responder a eventos JavaScript.
O Canvas pode responder a qualquer ação do usuário (cliques de tecla, cliques do mouse, cliques de botão, movimento do dedo).
HTML Canvas pode ser usado em jogos
Os métodos do Canvas para animações oferecem muitas possibilidades para aplicativos de jogos HTML.
Exemplo de tela
Em HTML, um elemento <canvas> se parece com isso:
<canvas id="myCanvas" width="200" height="100"></canvas>
O elemento <canvas> deve ter um atributo id para que possa ser referenciado pelo JavaScript.
O atributo largura e altura é necessário para definir o tamanho da tela.
Dica: Você pode ter vários elementos <canvas> em uma página HTML.
Por padrão, o elemento <canvas> não tem borda nem conteúdo.
Para adicionar uma borda, use um atributo de estilo:
Exemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;"></canvas>
Os próximos capítulos mostram como desenhar na tela.