Olá Lucas, tudo certo?
Coloca o seu código aqui para tentarmos descobrir pq está dando errado.
É só clicar no botão inserir código e colar ele dentro espaço delimitado.
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
function desenhaAlvo(){
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
function atualizaTela(){
limpaTela();
desenhaAlvo(x,y);
}
setInterval(atualizaTela,1000);
</script>
Olá Lucas, tudo bem?
Então existe alguns errinhos em seu código:
x
e y
dentro da função atualizaTela()
para a cada 1 segundo estar gerando valores aleatórios.desenhaAlvo()
você não declarou os argumentos necessários, ela deveria ser desenhaAlvo(x, y), veja que na função atualizaTela você passa 2 parâmetros ;)Deixe assim seu código:
function atualizaTela(){
limpaTela();
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
desenhaAlvo(x,y);
}
function desenhaAlvo(x, y){
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
Agora deve estar funcionando corretamente :)
Abraços e Bons Estudos!
Fala Lucas, beleza?
Você só precisa declarar as variáveis x e y dentro da função desenha alvo, assim apresentará o resultado que você quer.
...
function desenhaAlvo(){
var x = Math.floor(Math.random()*600);
var y = Math.floor(Math.random()*400);
desenhaCirculo(x,y,raio+20,'red');
desenhaCirculo(x,y,raio+10,'white');
desenhaCirculo(x,y,raio,'red');
}
...
Como essas variáveis estavam fora das funções chamadas pelo setInterval o valor delas nunca eram alteradas.