Estilizando elementos no Canvas
Agora, vamos dar vida aos seus desenhos no HTML Canvas, explorando técnicas de estilização para adicionar personalidade visual às suas criações.
Para começar, a propriedade fillStyle define a cor de preenchimento de suas formas. Tenho certeza que você lembra dessa propriedade dos tópicos anteriores. Por exemplo:
contexto.fillStyle = "#FF0000"; // Define a cor de preenchimento como vermelho contexto.fillRect(50, 50, 100, 80); // Desenha um retângulo preenchido nas coordenadas (50, 50) com largura 100 e altura 80
Aqui, o retângulo será preenchido com a cor vermelha.
Da mesma forma, a propriedade strokeStyle define a cor do contorno. Vamos aplicar isso a um círculo:
contexto.strokeStyle = "#0000FF"; // Define a cor do contorno como azul contexto.lineWidth = 2; // Define a largura da linha do contorno como 2 pixels contexto.beginPath(); contexto.arc(100, 150, 40, 0, 2 * Math.PI); contexto.stroke();
Agora, o círculo terá um contorno azul com uma linha mais fina.
Além disso, você pode ajustar a opacidade de seus elementos usando a propriedade globalAlpha. Veja um exemplo:
contexto.globalAlpha = 0.5; // Define a opacidade como 50% contexto.fillStyle = "#00FF00"; // Define a cor de preenchimento como verde contexto.fillRect(160, 50, 60, 60);
Neste caso, o retângulo verde terá uma transparência de 50%.
Vamos deixar todos esses exemplo em apenas um código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Estilizando Elementos 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");
// Estilizando um retângulo
contexto.fillStyle = "#FF0000";
// Define a cor de preenchimento como vermelho
contexto.fillRect(50, 50, 100, 80);
// Desenha um retângulo preenchido nas coordenadas (50, 50) com largura 100 e altura 80
// Estilizando um círculo
contexto.strokeStyle = "#0000FF"; // Define a cor do contorno como azul
contexto.lineWidth = 2; // Define a largura da linha do contorno como 2 pixels
contexto.beginPath();
contexto.arc(100, 150, 40, 0, 2 * Math.PI);
contexto.stroke();
// Estilizando um retângulo com opacidade
contexto.globalAlpha = 0.5; // Define a opacidade como 50%
contexto.fillStyle = "#00FF00"; // Define a cor de preenchimento como verde
contexto.fillRect(160, 50, 60, 60);
</script>
</body>
</html>
Visualização do código
Estas são apenas algumas das maneiras de estilizar elementos no Canvas.
Experimente diferentes combinações de cores, opacidades e contornos para descobrir o estilo visual que melhor se adequa aos seus projetos.
Continue praticando e explorando, quando tiver preparado var para o próximo módulo. Espero você lá!
