Tutorial de Canvas HTML
- Página Anterior Manual de Referência do SVG
- Próxima Página Desenho no Canvas
O elemento <canvas> do HTML é usado para desenhar gráficos em uma página da web.
O gráfico acima foi criado usando <canvas>.
Ele mostra quatro elementos: retângulo vermelho, retângulo de gradiente, retângulo multicolorido e texto multicolorido.
O que é Canvas HTML?
O elemento <canvas> HTML é usado para desenhar gráficos dinamicamente através de scripts (geralmente JavaScript).
O elemento <canvas> é apenas um contêiner de gráficos. Você deve usar scripts para desenhar gráficos reais.
O Canvas possui vários métodos para desenhar caminhos, retângulos, círculos, texto e adicionar imagens.
O Canvas HTML pode desenhar texto
O Canvas pode desenhar texto colorido e ainda pode ter efeitos animados.
O Canvas HTML pode desenhar gráficos
O Canvas possui poderosas capacidades de apresentação gráfica de dados usando gráficos e gráficos.
O Canvas HTML pode ser animado
O objeto Canvas pode se mover. Tudo é possível: desde um simples balão saltitante até animações complexas.
O Canvas HTML pode ser interativo
O Canvas pode responder a eventos JavaScript.
O Canvas pode responder a qualquer ação do usuário (clique de tecla, clique do mouse, clique de botão, movimento de dedo).
O Canvas HTML pode ser usado para jogos
Os métodos de animação do Canvas oferecem muitas possibilidades para aplicativos de jogos HTML.
Exemplo de Canvas
No HTML, o elemento <canvas> parece assim:
<canvas id="myCanvas" width="200" height="100"></canvas>
O elemento <canvas> deve ter um atributo id para que o JavaScript possa se referir a ele.
Os atributos width e height são necessários para definir o tamanho do canvas.
Dica: uma página HTML pode ter vários elementos <canvas>.
Por padrão, o elemento <canvas> não tem borda nem conteúdo.
Para adicionar uma borda, use a propriedade style：
Exemplo
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
Os capítulos seguintes apresentarão como desenhar no canvas.
Veja também：
Suporte do navegador
<canvas> é um elemento do padrão HTML5 (2014).
Todos os navegadores modernos suportam <canvas>：
| Chrome | Edge | Firefox | Safari | Opera | IE |
|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Suporte | Suporte | Suporte | Suporte | Suporte | 9-11 |
- Página Anterior Manual de Referência do SVG
- Próxima Página Desenho no Canvas
