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

Fiz desta forma e cheguei no resultado esperado, porém acredito que não é muito funcional, está correto ?

<!-- bandeiras.html -->

<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);
}

    function trocaBandeira(){
        setInterval(desenhaBandeiraBrasil, 3000)
        setInterval(desenhaBandeiraAlemanha, 6000)
        console.log(trocaBandeira)
    }

    trocaBandeira();

</script>
3 respostas
solução!

Fala, Thales! Tudo bom?

Meu amigo, ficou perfeito!!! É isso aí!

Sobre ser funcional ou não, acredito que podemos caminhar aos pouco!

Mas a resposta é sim, podemos melhorar!

É bom que nosso conhecimento vá agregando passo a passo para que podemos entender toda a estrutura por trás do que está sendo feito.

Muitas vezes, enxugar demais o código pode não ser uma boa coisa! Guarde isso!!!

Qualquer dúvida, estamos por aqui, Thales!

Bons estudos e vamos em frente!

<!-- bandeiras.html -->

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

<script>

    var cont = 1;

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);
}
function trocaBandeira(){

    if (cont >= 2){
        desenhaBandeiraAlemanha();
        cont--;
    }   
        else 
            if(cont <= 1 ){
                desenhaBandeiraBrasil();
                cont++;
            }   
    console.log(cont);

}

setInterval(trocaBandeira,3000);

</script>

Bom eu fiz usando contador que chegou no mesmo resultado .

Perfeito, Daniel!!!

Aos poucos vamos descobrindo outras formas de chegar no mesmo resultado!

O importante é a organização para que seu código possa ser compreendido mais facilmente, pensando em um time, por exemplo.

Qualquer dúvida estamos a disposição, meu amigo!!!

Bons estudos e vamos em frente!!!