Sobre a Aula
Retângulos e Quadrados
Agora, vamos explorar a criação de retângulos e quadrados no HTML Canvas. Essas formas são blocos de construção fundamentais para suas criações visuais.
Para desenhar um retângulo simples, use o seguinte código JavaScript:
contexto.fillStyle = "#FF0000"; // Define a cor de preenchimento como vermelho contexto.fillRect(50, 50, 100, 80); // Desenha um retângulo nas coordenadas (50, 50) com largura 100 e altura 80
Aqui, fillStyle define a cor de preenchimento e fillRect(x, y, width, height) cria o retângulo nas coordenadas especificadas.
Agora, se quiser um quadrado, basta garantir que a largura e a altura sejam iguais:
contexto.fillStyle = "#00FF00"; // Define a cor de preenchimento como verde contexto.fillRect(160, 50, 60, 60); // Desenha um quadrado nas coordenadas (160, 50) com largura e altura ambas 60
Lembre-se, a simplicidade é a chave aqui. Experimente ajustar as coordenadas e dimensões para ver os efeitos visuais.
Veja como fica o exemplo completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retângulos e Quadrados no Canvas</title>
<style>
canvas {
border: 1px solid #000;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="meuCanvas" width="300" height="200"></canvas>
<script>
var canvas = document.getElementById("meuCanvas");
var contexto = canvas.getContext("2d");
// Desenhando um retângulo
contexto.fillStyle = "#FF0000"; // Define a cor de preenchimento como vermelho
contexto.fillRect(50, 50, 100, 80); // Desenha um retângulo nas coordenadas (50, 50) com largura 100 e altura 80
// Desenhando um quadrado
contexto.fillStyle = "#00FF00"; // Define a cor de preenchimento como verde
contexto.fillRect(160, 50, 60, 60); // Desenha um quadrado nas coordenadas (160, 50) com largura e altura ambas 60
</script>
</body>
</html>
Visualização do código
Vamos avançar para aprender mais formas geométricas.
Entrar na conversa