Introdução
A tag HTML <canvas> é utilizada para desenhar gráficos e outros elementos visuais numa página web. Esta tag fornece uma plataforma para os desenvolvedores criarem jogos, imagens e animações usando JavaScript. O elemento canvas vem com vários atributos que permitem manipular o tamanho, a opacidade e a aparência da canvas.
Neste laboratório, vamos explorar como usar a tag <canvas> em HTML para criar gráficos, adicionar animações e manipular formas e texto usando JavaScript.
Nota: Pode praticar a codificação em
index.htmle aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, pode atualizar o separador Web 8080 para visualizar a página web.
Criando uma Canvas Simples
Vamos criar uma canvas simples usando a tag <canvas> sem qualquer conteúdo. No ficheiro index.html, escreva o seguinte código:
<!doctype html>
<html>
<head>
<title>Simple Canvas</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
Guarde o ficheiro e abra-o no seu navegador. Irá notar uma área em branco na página, que é a nossa canvas com uma largura padrão de 300px e uma altura de 150px.
Adicionando Estilos à Canvas
Podemos adicionar estilos à nossa canvas usando o atributo style. Vamos adicionar uma borda à nossa canvas para tornar os seus limites visíveis.
<!doctype html>
<html>
<head>
<title>Styled Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
</body>
</html>
Guarde o ficheiro e atualize o seu navegador para ver o resultado.
Criando Formas na Canvas
Agora vamos adicionar alguns gráficos à nossa canvas. Para fazer isso, precisamos usar JavaScript. Podemos usar o método getContext() para obter um contexto de desenho 2D da nossa canvas e realizar várias operações nele.
<!doctype html>
<html>
<head>
<title>Shapes on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Draw a rectangle
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 50);
</script>
</body>
</html>
No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, definimos a propriedade fillStyle para "red" para preencher o retângulo com a cor vermelha. Finalmente, desenhamos o retângulo usando o método fillRect().
Guarde o ficheiro e atualize o seu navegador para ver o resultado.
Adicionando Texto à Canvas
Vamos adicionar algum texto à nossa canvas usando JavaScript.
<!doctype html>
<html>
<head>
<title>Text on Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// Add text
ctx.font = "30px Arial";
ctx.fillStyle = "blue";
ctx.fillText("Hello World", 50, 100);
</script>
</body>
</html>
No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, definimos a propriedade font para "30px Arial" e a propriedade fillStyle para "blue". Finalmente, adicionamos o texto "Hello World" usando o método fillText().
Guarde o ficheiro e atualize o seu navegador para ver o resultado.
Animando Gráficos na Canvas
Também podemos criar animações na canvas usando JavaScript e a tag HTML <canvas>. Vamos criar uma animação de um retângulo em movimento na nossa canvas.
<!doctype html>
<html>
<head>
<title>Animated Canvas</title>
</head>
<body>
<canvas id="myCanvas" style="border: 1px solid black;"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let x = 20;
let y = 20;
const dx = 5;
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(x, y, 50, 50);
if (x + 50 > canvas.width || x < 0) {
dx = -dx;
}
x += dx;
}
animate();
</script>
</body>
</html>
No código acima, primeiro obtemos o elemento canvas pelo seu ID myCanvas, e então obtemos um contexto de desenho 2D usando getContext(). Em seguida, declaramos algumas variáveis x e y para armazenar a posição do nosso retângulo. Também declaramos a variável dx para mover o retângulo ao longo do eixo x.
Em seguida, criamos uma função animate() para desenhar o retângulo na tela. Usamos o método clearRect() para limpar os desenhos anteriores na canvas em cada frame. Em seguida, preenchemos o retângulo com a cor vermelha usando o método fillRect().
Depois, verificamos se o retângulo atingiu os limites da canvas e, caso isso aconteça, mudamos a direção do movimento alterando o valor de dx.
Finalmente, chamamos o método requestAnimationFrame() para criar um loop para a animação.
Guarde o ficheiro e atualize o seu navegador para ver o retângulo animado.
Resumo
Neste laboratório, aprendemos como usar a tag HTML <canvas> para criar gráficos e animações em uma página web. Também aprendemos como manipular o tamanho, a opacidade e a aparência da canvas usando atributos e estilos. Adicionamos formas, texto e animações na canvas usando JavaScript e o método getContext().
