<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 temporizador = 1;
var marcador = document.getElementById("55");
function relogio() {
temporizador++;
}
desenhaBandeiraAlemanha();
function trocaBandeira() {
if (temporizador == 3) {
desenhaBandeiraBrasil();
} else if (temporizador == 6) {
desenhaBandeiraAlemanha();
temporizador = 0;
}
}
setInterval(relogio, 1000);
setInterval(trocaBandeira, 10)
</script>
3
respostas
respostas
minha solução do projeto de trocar bandeiras
eu percebi que poderia fazer apenas uma função para fazer a troca de bandeiras, so que já estou postando aqui, eu primeiro fiz uma variável e uma função que funciona com um relógio que fica com o tempo registrado, e a função "trocaBandeira" troca pra bandeira do brasil aos 3 segundos e pra da alemanha aos 6 segundos e reinicia o temporizador :)
Oi, Luiz! Tudo bem?
Código funcionando corretamente, parabéns pela elaboração e desempenho, ficou super bacana! Obrigada também por ter compartilhado com a nossa comunidade a sua solução, tenho certeza que ajudará muitos colegas que possam estar tendo algum tipo de dificuldade!
Deixo como sugestão para estudo uma outra forma de resolver o desafio, para conseguirmos visualizar como existem diferentes maneiras de realizar alguma ação no mundo da programação:
var mostraBrasil = true; //para começarmos com a bandeira do Brasil
function trocaBandeira() {
if(mostraBrasil == true) {
desenhaBandeiraBrasil();
mostraBrasil = false;
} else {
desenhaBandeiraAlemanha();
mostraBrasil = true;
}
}
setInterval(trocaBandeira, 1000); // a cada 1 segundos, chama trocaBandeira
Espero ter contribuído! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!
Um forte abraço e bons estudos!
muito obrigado pela resposta!