Desenvolvimento de uma aplicação simples
Vamos desenvolver uma aplicação simples no módulo de Projetos Práticos e Aplicações do curso sobre HTML Canvas. Esta aplicação servirá como um exemplo prático para consolidar os conceitos aprendidos até agora.
Desenvolvimento de uma Aplicação Simples: Desenhando uma Casa
Nossa aplicação consistirá em desenhar uma casa básica no Canvas. Vamos dividir esse processo em passos simples:
Passo 1: Configuração Inicial
Antes de começar, certifique-se de ter um arquivo HTML básico com um elemento Canvas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Desenhando uma Casa</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="minhaCanvas" width="400" height="400"></canvas>
<script>
var canvas = document.getElementById("minhaCanvas");
var contexto = canvas.getContext("2d");
</script>
</body>
</html>
Passo 2: Desenho da Casa
Agora, vamos adicionar o código JavaScript para desenhar a casa no Canvas.
// Parte 2: Desenho da Casa var tamanhoCasa = 100; contexto.beginPath(); // Desenhar o retângulo da casa contexto.rect(canvas.width / 2 - tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2, tamanhoCasa, tamanhoCasa); contexto.fillStyle = "lightblue"; contexto.fill(); contexto.stroke(); // Desenhar o telhado contexto.beginPath(); contexto.moveTo(canvas.width / 2 - tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2); contexto.lineTo(canvas.width / 2, canvas.height / 2 - tamanhoCasa); contexto.lineTo(canvas.width / 2 + tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2); contexto.closePath(); contexto.fillStyle = "red"; contexto.fill(); contexto.stroke();
Este código desenha um retângulo representando a casa e um triângulo acima do retângulo representando o telhado. A posição e o tamanho da casa podem ser ajustados conforme necessário.
Passo 3: Interação Simples
Vamos adicionar uma interação simples. Ao clicar na casa, ela mudará de cor.
// Parte 3: Interação Simples
canvas.addEventListener('click', function() {
contexto.clearRect(0, 0, canvas.width, canvas.height);
contexto.beginPath();
contexto.rect(canvas.width / 2 - tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2, tamanhoCasa, tamanhoCasa);
contexto.fillStyle = getRandomColor();
contexto.fill();
contexto.stroke();
contexto.beginPath();
contexto.moveTo(canvas.width / 2 - tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2);
contexto.lineTo(canvas.width / 2, canvas.height / 2 - tamanhoCasa);
contexto.lineTo(canvas.width / 2 + tamanhoCasa / 2, canvas.height / 2 - tamanhoCasa / 2);
contexto.closePath();
contexto.fillStyle = getRandomColor();
contexto.fill();
contexto.stroke();
});
function getRandomColor() {
var letras = '0123456789ABCDEF';
var cor = '#';
for (var i = 0; i < 6; i++) {
cor += letras[Math.floor(Math.random() * 16)];
}
return cor;
}
O resultado do código ficará assim:
Agora, ao clicar na casa, ela mudará de cor aleatoriamente
O que você achou desse mini projeto? É interessante trabalhar com o Canvas. Com ele dar para criar várias coisa interessante.
Então, use a sua imaginação e acrescente mais elementos a essa casa. Agora, dito isso, vamos para próxima aula.
