O HTML <canvas> elemento é usado para desenhar gráficos em uma página web.
O gráfico à esquerda é criado com <canvas> . Ele mostra quatro elementos: um retângulo vermelho, um retângulo gradiente, um retângulo multicolor e um texto multicolor.
O que é HTML Canvas?
O HTML <canvas> elemento é usado para desenhar gráficos, em tempo real, através de scripts (usually JavaScript) .
O <canvas> elemento só está um recipiente para gráficos. Você deve usar um script para realmente desenhar os gráficos.
Lona tem vários métodos para desenhar caminhos, caixas, círculos, texto e adicionando imagens.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta plenamente o <canvas> elemento.
| Elemento | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9 | 2.0 | 3.1 | 9 |
HTML Canvas possível desenhar texto
Canvas pode desenhar texto colorido, com ou sem animação.
HTML Canvas pode desenhar gráficos
Canvas tem grandes recursos para apresentação de dados gráficos com uma aparência de gráficos e tabelas.
HTML Canvas pode ser animado
objetos de lona pode se mover. Tudo é possível: a partir de esferas de salto simples para animações complexas.
HTML Canvas pode ser interativo
Canvas pode responder a eventos de JavaScript.
Canvas pode responder a qualquer ação do usuário (cliques chave, cliques do mouse, cliques em botões, movimento do dedo).
Canvas HTML pode ser usado em jogos
métodos 'de lona para animações, oferecem uma série de possibilidades para aplicações de jogos HTML.
Exemplo canvas
Em HTML, um <canvas> elemento parecido com este:
<canvas id="myCanvas" width="200" height="100"></canvas>O <canvas> elemento deve ter um atributo id que ele possa ser referido por JavaScript.
A largura ea altura atributo é necessário definir o tamanho da tela.
Tip: Você pode ter vários <canvas> elementos em uma página HTML.
Por padrão, o <canvas> elemento não tem fronteiras e sem conteúdo.
Para adicionar um limite, utilize um atributo de estilo:
Exemplo
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid
#000000;">
</canvas>
Tente você mesmo " Os próximos capítulos mostram como desenhar na tela.