Círculos e Arcos
Vamos explorar a criação de círculos e arcos no HTML Canvas, adicionando uma dimensão circular às suas habilidades de desenho.
Para desenhar um círculo simples, utilize o seguinte código JavaScript:
contexto.fillStyle = "#0000FF"; // Define a cor de preenchimento como azul contexto.beginPath(); contexto.arc(100, 150, 40, 0, 2 * Math.PI); // Desenha um círculo nas coordenadas (100, 150) com raio 40 contexto.fill();
Aqui, fillStyle define a cor de preenchimento, e arc(x, y, raio, pontoInicial, pontoFinal) cria o círculo.
As coordenadas (x, y) especificam o centro, o raio define o tamanho, e os pontos inicial e final determinam a porção do círculo a ser desenhada (em radianos).
Agora, se deseja desenhar um arco em vez de um círculo completo, ajuste os pontos inicial e final:
contexto.strokeStyle = "#FF00FF"; // Define a cor de contorno como magenta contexto.lineWidth = 3; // Define a largura da linha como 3 pixels contexto.beginPath(); contexto.arc(220, 150, 40, 0, Math.PI); // Desenha um arco nas coordenadas (220, 150) com raio 40 contexto.stroke();
Neste exemplo, ajustamos strokeStyle para definir a cor do contorno e lineWidth para especificar a largura da linha.
O arco agora vai do ponto inicial até Math.PI, desenhando assim apenas metade do círculo.
Vamos fazer um exemplo completo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Círculos e Arcos 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 círculo
contexto.fillStyle = "#0000FF"; // Define a cor de preenchimento como azul
contexto.beginPath();
contexto.arc(100, 150, 40, 0, 2 * Math.PI); // Desenha um círculo nas coordenadas (100, 150) com raio 40
contexto.fill();
// Desenhando um arco
contexto.strokeStyle = "#FF00FF"; // Define a cor de contorno como magenta
contexto.lineWidth = 3; // Define a largura da linha como 3 pixels
contexto.beginPath();
contexto.arc(220, 150, 40, 0, Math.PI); // Desenha um arco nas coordenadas (220, 150) com raio 40
contexto.stroke();
</script>
</body>
</html>
Visualização do código
Pratique esses conceitos para aprimorar suas habilidades no HTML Canvas. Nos próximos tópicos, vamos estilizar vários elementos de um só vez.
