Solucionado
Eu apenas fiz isso e funcionou, mas fiquei um pouco incerto pois todas as soluções que eu vi, o pessoal utilizava uma "Function". Portanto tem algum problema nisso ?
setInterval (desenhaBandeiraAlemanha, 3000);
setInterval (desenhaBandeiraBrasil, 6000);
Boa noite, Igor! Como vai?
Não há problema algum! O que vc fez é válido também e muito utilizado!
Grande abraço e bons estudos, meu aluno!
Igor,
Creio que assim não funciona como solicitado no exercício.
A idéia é que fosse desenhada uma bandeira, ela ficasse 3 segundos e só depois a outra bandeira seria desenhada.
Da forma que fizestes, aqui pelo menos, a bandeira da Alemanha tem ficado sobreposta o tempo inteiro.
Aos 3 segundos, é desenhado a bandeira da Alemanha, e no sexto segundo, é desenhada a do Brasil, e sobreposta pela da Alemanha ?
No teu teste, as bandeiras permanecem 3 segundos na tela, antes de trocar ?
Acho que por isso o uso da função como nas soluções do 'pessoal' ...
Experimente as soluções do 'pessoal' para ver a diferença.
O meu código, especificamente, ficou assim:
<!DOCTYPE html>
<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 b = 1;
function trocaBandeiras(){
if (b == 1) {
desenhaBandeiraBrasil();
b = 0;
} else {
desenhaBandeiraAlemanha();
b = 1;
}
}
setInterval(trocaBandeiras, 3000);
</script>
</html>Abraços e bons estudos !
Eai Marcus,
No meu funcionou como proposto no exercício, só não utilizei funções como a maioria.
E a partir disso o intervalo 'reseta' (Eu acho), ou seja, aos 3 segundos irá desenhar a bandeira da Alemanha novamente, e aos 6 ela será sobreposta pela do Brasil, resetou ... Aos 3 segundos bandeira da Alemanha e assim por diante.
Não sei se é a explicação exata, mas analisando o funcionamento deve ser algo nessa linha de raciocínio, pois no meu código funcionou normal, tanto com funções como com 2 "setInterval" simples, se alguém souber explicar melhor eu agradeço.
Abraços e bons estudos !
Oi Igor e Marcus, tudo bem? Eu também cheguei no resultado pelo mesmo pensamento do Igor, porém eu coloquei um pincel.clearRect(0,0,600,400); nas funções que desenham as bandeiras, para realmente desenhar uma bandeira, apagar e desenhar a outra. Assim, não tem sobreposição.
function desenhaBandeiraAlemanha() {
let tela = document.querySelector("canvas");
let pincel = tela.getContext("2d");
pincel.clearRect(0,0,600,400);
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);
}O que acham?
abs
Caue Benedan
Eai Caue,
Boa observação, foi exatamente isso que eu coloquei no meu código, creio que seja o elemento “chave” (clearRect) para esse código funcionar.
Muito bem, Caue! É isso aí, meu aluno!
Vcs estão descobrindo logo de cara algo que ocorre muito no mundo da programação! Muitas vezes para o mesmo problema temos mais de uma solução viável!
Sempre que vcs tiverem alguma dúvida é só mandar aqui no fórum da Alura!
Grande abraço e bons estudos, meus alunos!