como desenho uma pokebola?

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,