depois de verificar meu programa, quis executar copiando o do professor, mas da forma que ele fez, minha bandeira da Alemanha não aparece. Alguém sabe me ajudar?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
depois de verificar meu programa, quis executar copiando o do professor, mas da forma que ele fez, minha bandeira da Alemanha não aparece. Alguém sabe me ajudar?
Boa noite Victor,
Você precisa postar seu código completo.
Não esqueça de usar o botão inserir código pra que ele fique formatado.
<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 mostraBrasil = true;
function trocaBandeira() {
if(mostraBrasil == true) {
desenhaBandeiraBrasil();
} else {
desenhaBandeiraAlemanha();
}
mostraBrasil = !mostraBrasil;
}
</script>
Tente isso
<canvas width="600" height="400"></canvas>
<button onclick="trocaBandeira()"> trocar </button>
<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 mostraBrasil = true;
function trocaBandeira() {
if(mostraBrasil == true) {
desenhaBandeiraBrasil();
} else {
desenhaBandeiraAlemanha();
}
mostraBrasil = !mostraBrasil;
}
trocaBandeira();
</script>é uma solução alternativa boa, mas eu gostaria de entender por que a resolução do site não consigo executar rsrs, mas de qualquer forma obrigado por essa nova visão de resultado que me passou
Victor, acredito que o motivo seja pq você não fez a chamada para o método que realiza a troca da bandeira, não ?
perdao, tinha um setInterval que eu não coloquei aqui na questão
setInterval( trocaBandeira, 3000);Victor, colei o seu setInterval aqui no código que você passou ali em cima e funcionou normalmente. Fiz o teste usando o Chrome e colei acima da linha que possui o fechamento da tag script </script>
ficou assim
<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 mostraBrasil = true;
function trocaBandeira() {
if(mostraBrasil == true) {
desenhaBandeiraBrasil();
} else {
desenhaBandeiraAlemanha();
}
mostraBrasil = !mostraBrasil;
}
setInterval( trocaBandeira, 3000);
</script>Eu não sei o que houve rsrs mas agora funcionou, esse mesmo código exatamente como está, antes não estava funcionando. Mas de qualquer forma muito obrigado!