Entrar Ainda não tem acesso?
2
respostas

Meu código

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Movendo elementos: animações simples e atividade Trocando bandeiras

por Izabele Soares
| 31.3k xp | 49 posts
ASSISTENTE ADMINISTRATIVO 
<!-- 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);
}


    var mostra =  true;
    function trocaBandeira() {


        if(mostra == true){
            desenhaBandeiraBrasil()
            mostra = false
        } else if(mostra == false){
            desenhaBandeiraAlemanha()
            mostra = true
        }
    }

setInterval(trocaBandeira,2000);


</script>
2 respostas
por Izabele Soares
| 31.3k xp | 49 posts
ASSISTENTE ADMINISTRATIVO 
<!-- 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);
}

function trocaBandeiraOutra() {
    setInterval(desenhaBandeiraAlemanha, 6000);
}

trocaBandeira();
trocaBandeiraOutra();





</script>
por JP
| 274k xp | 270 posts
Instrutor

Oi Izabele!

Muito bom! Parabéns pelo empenho nos estudos!

Continue praticando e qualquer dúvida pode contar com a gente.