Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Eu decidi implementar o código para assim que abrir o navegador, já iniciar com uma bandeira.

Segundo o que eu pesquisei a função setTimeout() Executa um bloco específico uma vez depois de um determinado tempo. E no meu caso eu coloquei para iniciar com a bandeira do Brasil, trocando os valores da variável mostraBrasil para false. E acrescentando o código abaixo.

setTimeout(desenhaBandeiraBrasil, 0); // minha implementação, para iniciar com a bandeira do Brasil.

Mas tem como fazer com o que inicie com a bandeira da Alemanha, trocando a função da desenhaBandeiraBrasil para desenhaBandeiraAlemanha . Veja no código abaixo.

setTimeout(desenhaBandeiraAlemanha, 0);

Aqui o artigo que fala sobre essas funções. Veja aqui!

Aqui o código completo

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

<script>

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

    pincel.fillStyle="green";
    pincel.fillRect(0, 0, 600, 400);

    pincel.fillStyle="yellow";
    pincel.beginPath();
    pincel.moveTo(300, 50);
    pincel.lineTo(50, 200);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.beginPath();
    pincel.moveTo(50, 200);
    pincel.lineTo(300, 350);
    pincel.lineTo(550, 200);
    pincel.fill();

    pincel.fillStyle="darkblue";
    pincel.beginPath();

    pincel.arc(300, 200, 100, 0, 2* 3.14);
    pincel.fill();
}


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

    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 133);

    pincel.fillStyle = 'red';
    pincel.fillRect(0, 133, 600, 133);

    pincel.fillStyle = 'yellow';
    pincel.fillRect(0, 266, 600, 133);
}

var mostraBrasil = false; // a ideia é começar com a bandeira do Brasil

function trocaBandeira() {

    //aqui devemos chamar desenhaBandeiraAlemanha() ou desenhaBandeiraBrasil()
    if(mostraBrasil) {
        desenhaBandeiraBrasil();
    } else {
        desenhaBandeiraAlemanha();
    }
    mostraBrasil = !mostraBrasil; // ! => operador lógico que significa "NOT" ou seja, inverte o valor booleano, de "true" para "false" ou vise versa.
}

setTimeout(desenhaBandeiraBrasil, 0); // minha implementação, para iniciar com a bandeira Brasileira.

setInterval(trocaBandeira, 3000); // a cada 3 segundos, chama trocaBandeira 

</script>
2 respostas
solução!

Olá Marcos tudo bem ?

Primeiramente desculpe-nos pela demora de um feedback. Acabei de testar seu código aqui e gostaria de te dar meus Parabéns , muito legal você pesquisar sobre a função setTimeout() e entender o funcionamento dela e utiliza-lá no seu código .

Continue assim praticando e consolidando seu conhecimento que você vai evoluir muito, e sinta-se a vontade para compartilhar seus códigos aqui no fórum , isso incentiva outros alunos e assim eles podem aprender maneiras diferentes de fazer a atividade assim como você fez. =)

E muito obrigada pelo compartilhamento do artigo foi muito útil.

E lembre-se qualquer dúvida é só compartilhar aqui no fórum, ficaremos felizes em poder te ajudar. =)

Abraços e bons estudos.

Muito obrigado, Suelen! Eu que agreço vocês! E que isso, nem notei demora.