Como usar
O elemento <canvas> em HTML possibilita criar uma área para adicionar conteúdo gráfico ou animações usando JavaScript. Um objeto de contexto 2D é criado e, com os diferentes métodos da API <canvas>, você consegue especificar o conteúdo que deseja exibir.
O que é a tag <canvas> em HTML?
A tag <canvas> em HTML é um elemento que oferece um espaço de desenho onde você pode criar conteúdo gráfico ou animações usando JavaScript. Essa área é definida pelos atributos de altura e largura e pode ser posicionada em qualquer lugar de um documento HTML usando a tag HTML <canvas>.
O conteúdo desenhado dentro do <canvas> não é tratado como elementos HTML individuais e, por isso, não pode ser estilizado com CSS. No entanto, o próprio <canvas> pode ter estilos aplicados via CSS, como bordas, largura, altura e posicionamento. Caso o navegador não ofereça suporte ao <canvas>, qualquer conteúdo HTML colocado entre as tags <canvas> e </canvas> será exibido como fallback. No entanto, quase todos os navegadores modernos já oferecem suporte nativo a esse elemento.
- Fique online com 99,99% de tempo de atividade e segurança robusta
- Aumente o desempenho com um clique à medida que o tráfego cresce
- Inclui domínio gratuito, SSL, e-mail e suporte 24 horas por dia, 7 dias por semana
Qual é a sintaxe da tag <canvas> em HTML?
O elemento <canvas> em HTML não oferece nenhuma ferramenta de design integrada. Ele apenas disponibiliza um framework que permite usar JavaScript para criar conteúdo gráfico. A sintaxe básica do elemento é a seguinte:
<canvas id="ExemploCanvas" width="[em pixels]" height="[em pixels]"></canvas>Nomeie o elemento usando id e atribua suas dimensões com width e height. Opcionalmente, você pode usar outros parâmetros para especificar o design do conteúdo gráfico.
Como funciona a tag <canvas>?
Você pode usar a sintaxe acima para criar uma área simples. No exemplo abaixo, a área terá 500 pixels de largura e 250 pixels de altura. Este é o código:
<!DOCTYPE html>
<html>
<body>
<h1>Exemplo de canvas HTML</h1>
<canvas id="ExemploCanvas" width="500" height="250" style="border: 1px solid grey"></canvas>
</body>
</html>Esse código criará um espaço em branco. Para preencher o elemento <canvas> em HTML com formas, imagens, textos ou gradientes (ou animar elementos), você terá que usar JavaScript. O conteúdo será renderizado como bitmap, no qual cada pixel é manipulado individualmente. Ele poderá ser exportado para formatos como PNG ou JPEG posteriormente.
Para usar o elemento, aplique o método getElementById(). Ele só funcionará se você tiver atribuído um ID único ao espaço de <canvas>. Se quiser pintar, desenhar ou interagir com a área definida, você terá que criar um objeto de contexto 2D. Dando continuidade ao exemplo acima, o código ficaria assim:
const ExemploCanvas = document.getElementById("ExemploCanvas");
const ctx = ExemploCanvas.getContext("2d");Agora, podemos usar o elemento <canvas> em HTML como uma tela. Começaremos posicionando um retângulo simples em uma área definida usando a função fillRect(). Ele terá a cor azul-petróleo com 200 pixels de largura e 150 pixels de altura. Vamos posicioná-lo a 10 pixels da borda esquerda e 50 pixels da borda superior. Este é o código:
<!DOCTYPE html>
<html>
<body>
<h1>Exemplo de canvas HTML</h1>
<canvas id="ExemploCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const ExemploCanvas = document.getElementById("ExemploCanvas");
const ctx = ExemploCanvas.getContext("2d");
ctx.fillStyle = "teal";
ctx.fillRect(10, 50, 200, 150);
</script>
</body>
</html>Quais são os usos de <canvas> em HTML?
Apesar de termos desenhado apenas um retângulo simples no exemplo acima, você também pode usar o elemento <canvas> para criar formas e designs muito mais complexos. Por exemplo, é possível criar arcos, textos, transparências, gradientes de cor e gráficos nos formatos JPEG e PNG, que podem ser recortados, escalados e posicionados. Você também pode usar a função de tempo do JavaScript para implementar animações em uma tag <canvas> em HTML.
Quais dimensões um elemento <canvas> pode ter?
As dimensões máximas de um elemento <canvas> em HTML variam dependendo do navegador usado e de seu ambiente. Por exemplo, o limite no iOS é 4096 x 4096 pixels, enquanto outros sistemas permitem ultrapassar 10000 x 10000 pixels. A área não se ajusta automaticamente para preservar as proporções. Se necessário, é preciso definir regras de estilo no CSS para torná-lo responsivo e adequado para diferentes dispositivos
Métodos com a API <canvas> em HTML
Vimos acima como criar um objeto de contexto 2D. Usando o comando getContext("2d"), você consegue preencher a área <canvas> como quiser. Abaixo, resumimos os métodos mais importantes que estão disponíveis na API.
Texto
| Método | Descrição |
|---|---|
font
|
Define a fonte do texto |
fillText()
|
Insere o texto (completamente preenchido) na área <canvas> em HTML
|
strokeText()
|
Insere o texto (apenas contornos) |
Imagem
| Método | Descrição |
|---|---|
drawImage()
|
Posiciona uma imagem ou vídeo em um elemento <canvas> em HTML
|
Desenhos
| Método | Descrição |
|---|---|
fillRect()
|
Desenha um retângulo preenchido |
strokeRect()
|
Desenha um retângulo sem preenchimento |
clearRect()
|
Limpa os pixels especificados dentro de um retângulo |
Caminho
| Método | Descrição |
|---|---|
beginPath()
|
Inicia um novo caminho |
lineTo()
|
Desenha uma linha para o caminho |
moveTo()
|
Move o caminho para um ponto específico dentro da área |
Design
| Método | Descrição |
|---|---|
addColorStop()
|
Especifica uma cor e uma posição em um objeto gradiente |
createLinearGradient()
|
Cria um objeto gradiente linear |
createPattern()
|
Repete o elemento especificado |
shadowBlur
|
Define ou retorna o nível de desfoque nas sombras |
shadowColor
|
Define ou retorna a cor usada nas sombras |
Funções adicionais
| Método | Descrição |
|---|---|
restore()
|
Restaura um desenho para o mesmo estado da última vez em que ele foi salvo |
save()
|
Salva o estado atual do desenho e todos os seus atributos |
Exemplo de <canvas> em HTML com texto e gradiente de cor
Em nosso último exemplo, combinaremos alguns dos métodos apresentados na seção acima. Primeiro, vamos criar uma área com as dimensões 500 x 250 pixels usando a tag <canvas> em HTML. Em seguida, criaremos um objeto de contexto 2D. Por fim, vamos inserir um título com contorno e uma frase com um gradiente de cor.
<!DOCTYPE html>
<html>
<body>
<h1>Exemplo de canvas HTML com texto e gradiente de cor</h1>
<h2>Este exemplo usa os métodos strokeText() e gradiente.</h2>
<canvas id="ExemploCanvas" width="500" height="250" style="border:1px solid grey"></canvas>
<script>
const c = document.getElementById("ExemploCanvas");
const ctx = c.getContext("2d");
ctx.font = "40px Calibri";
ctx.strokeText("Este é o título", 20, 50);
ctx.font = "30px Calibri";
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "teal");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "green");
ctx.strokeStyle = gradient;
ctx.strokeText("Esta é a frase adicional", 20, 90);
</script>
</body>
</html>- SSL Wildcard grátis para mais segurança
- Registro privado grátis para mais privacidade
- Domain Connect grátis para configurar DNS fácil