O pulso... pulsou! | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

1
resposta

por Grasiele Pereira Gomes

| 172.9k xp | 18 posts

Auxiliar Administrativo

<canvas width="600" height="400"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);


function desenhaCirculo(x, y, raio) {

    pincel.fillStyle = 'red';
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, 2 * Math.PI);
    pincel.fill();
}


function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);
}

var raio = 20;
var pulso = 1;

function atualizaTela() {

    limpaTela();

    if(raio > 30) {

        pulso = -1;

    } 

    else if(raio < 20) {
        pulso = 1;
    } 

    desenhaCirculo(100, 100, raio);

    raio = raio + pulso;   



}


setInterval(atualizaTela, 20);

1 resposta

por Caroline Carvalho

| 946k xp | 2965 posts

Alura Scuba Team

23/05/2022

Olá, Grasiele! Tudo bem por aí?

Mandou bem! Você conseguiu encontrar uma solução para o desafio.

Caso tenha ficado com alguma dúvida não deixe de compartilhar com a gente.

Continue praticando.

Bons estudos e até mais!