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