como faço os contornos dos circulos
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
como faço os contornos dos circulos
Olá Laissa,
Segue abaixo um exemplo de código que desenha uma pokeball:
<canvas id="myCanvas" height="400"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
context.lineWidth = 2.5;
context.fillStyle="white";
context.beginPath();
context.arc(100, 100, 30, 0, 1*Math.PI);
context.closePath();
context.stroke();
context.fill();
context.fillStyle="rgb(150,0,0)";
context.beginPath();
context.arc(100, 100, 30, 1*Math.PI, 0);
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.arc(100,100,10,0, 2*Math.PI);
context.fillStyle="white";
context.closePath();
context.stroke();
context.fill();
context.beginPath();
context.arc(100,100,9,0,2*Math.PI);
context.fillStyle="rgba(24,23,24, .8)";
context.closePath();
context.stroke();
</script>Segue o código comentado para facilitar o entendimento:
<canvas id="myCanvas" height="400"></canvas>
<script>
let canvas = document.getElementById('myCanvas');
let context = canvas.getContext('2d');
context.lineWidth = 2.5;
//PARTE INFERIOR DA POKEBALL ---------------------------------------------------------
//define cor (branco) da parte inferior da pokeball
context.fillStyle="white";
//desenha meia lua da parte inferior da pokeball
context.beginPath();
//define path / contorno
context.arc(100, 100, 30, 0, 1*Math.PI);
context.closePath();
//desenha contorno do path
context.stroke();
//preenche o contorno desenhado no passo acima com a cor definida no fillSyle (branco)
context.fill();
//PARTE SUPERIOR DA POKEBALL --------------------------------------------------------
//define cor (vermelho) da parte superior da pokeball
context.fillStyle="rgb(150,0,0)";
//desenha meia lua da parte superior da pokeball
context.beginPath();
//define path / contorno
context.arc(100, 100, 30, 1*Math.PI, 0);
context.closePath();
//desenha contorno do path
context.stroke();
//preenche o contorno desenhado no passo acima com a cor definida no fillSyle (vermelho)
context.fill();
//MEIO DA POKEBALL --------------------------------------------------------
//define cor (branco) do circulo central da pokeball
context.fillStyle="white";
//desenha circulo central da pokeball
context.beginPath();
//define path / contorno
context.arc(100,100,10,0, 2*Math.PI);
context.closePath();
//desenha contorno do path
context.stroke();
//preenche o contorno desenhado no passo acima com a cor definida no fillSyle (branco)
context.fill();
//desenho do circulo central com a espessura maior
context.beginPath();
context.arc(100,100,9,0,2*Math.PI);
context.fillStyle="rgba(24,23,24, .8)";
context.closePath();
context.stroke();
</script>obrigada
Laissa,
Você poderia por gentileza marcar o tópico como solucionado?
att,