Olá galera, busquei comentar o código como exercício de fixação e entendimento mesmo. Caso tenha algo errado por favor compartilhe para que eu possa entender melhor. Valeu!
<canvas width="600" height="400"></canvas>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'lightgray'; // cor do canvas ( no caso um retangulo)
pincel.fillRect(0, 0, 600, 400); //canvas
var raio = 10; // valor do raio que pode ser alterado.
//função para desenhar o circulo
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
// função que irá limpar o círculo previamente desenhado. Neste caso mantemos o canvas com a cor cinza claro.
function limpaTela() {
pincel.fillStyle = 'lightgray';
pincel.clearRect(0, 0, 600, 400);
pincel.fillRect(0, 0, 600, 400);
}
// função onde desenharemos 3 circulos cada um com um raio menor que outro. (Começamos com o circulo maior pois os menores vai sobrepondo os maiores.)
function desenhaAlvo(x, y) {
desenhaCirculo(x, y, raio+20, 'red');
desenhaCirculo(x, y, raio+10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
// função que sorteará a posição com o parâmetro máximo(chamado no xAleatório representando de 0 até o limite de 600 no eixo x e em yAleatório de 0 até o limite de 400 no eixo y). Com arredondamento para baixo com Math.floor.
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
//função que une a limpeza da tela (limpaTela()) e desenha um alvo (desenhaAlvo()) em posições aleatórias (sorteiaPosição()) no eixo x e no eixo y respeitando os limites do canvas.
function atualizaTela() {
limpaTela();
var xAleatorio = sorteiaPosicao(600);
var yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
// Chamada da função que queremos mostrar e o tempo em milisegundos.
setInterval(atualizaTela, 1000);
</script>
