<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.font = "40px Verdana";
pincel.fillText("Bandeiras Rotativas!!!!", 100, 200);
pincel.strokeRect(0,0,600,400);
function geraTela() {
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
}
function desenhaBandeiraBrasil() {
geraTela();
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 * Math.PI);
pincel.fill();
}
function desenhaBandeiraAlemanha() {
geraTela()
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 desenhaBandeiraHolanda() {
geraTela()
pincel.fillStyle = "#AE1C28";
pincel.fillRect(0, 0, 600, 133);
pincel.fillStyle = "white";
pincel.fillRect(0, 133, 600, 133);
pincel.fillStyle = "#21468B";
pincel.fillRect(0, 266, 600, 133);
}
function desenhaBandeiraItalia() {
geraTela();
pincel.fillStyle = '#009246';
pincel.fillRect(0,0,200,400);
pincel.fillStyle = 'white';
pincel.fillRect(200,0,200,400);
pincel.fillStyle = '#CE2B37';
pincel.fillRect(400,0,200,400);
}
function desenhaBandeiraSuecia() {
geraTela();
pincel.fillStyle = 'blue';
pincel.fillRect(0,0,600,400);
pincel.fillStyle = 'yellow';
pincel.fillRect(0,160,600,80);
pincel.fillStyle = 'yellow';
pincel.fillRect(180,0,80,400);
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
let bandeira = 0; //usando let e não var para poder usar Flag em varios escobos.
function trocaBandeira() {
limpaTela();
if(bandeira == 0) { //vai somando de 1 em 1 de acordo com as atribuições das bandeiras. se você declarar true or false, só consegue realizar com duas bandeiras.
desenhaBandeiraBrasil();
bandeira++
}else if(bandeira == 1) {
desenhaBandeiraAlemanha();
bandeira++;
}else if(bandeira == 2) {
desenhaBandeiraHolanda();
bandeira++;
}else if(bandeira == 3) {
desenhaBandeiraItalia()/
bandeira++
}else if(bandeira == 4) {
desenhaBandeiraSuecia();
bandeira = 0; //volta para bandeira do brasil e ao looping.
}
}
setInterval(trocaBandeira, 2000);
</script>
