Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Código não funciona

Código da aula 5,

<canvas width="600" height="400"></canvas>

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgrey';
  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);
    } 
    function desenhaAlvo(x, y) {
     desenhaCirculo(x, y, raio+20, 'red');    
     desenhaCirculo(x, y, raio+10, 'white');
     desenhaCirculo(x, y, raio+20, 'red');
     }
     function sorteiaPosicao(maximo) {
        return Math.floor(Math.random() * maximo);
    }
    function atualizaTela() {

        limpaTela();
        var xalearorio = sorteiaPosicao(600);
        var yalearorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);
        }



    setInterval(atualizaTela, 1000);    




</script>

explicação 2 não funcionou.

3 respostas

Boa tarde Aline,

Um dos problema está aqui, nos nomes das variáveis abaixo:

var xalearorio = sorteiaPosicao(600);
var yalearorio = sorteiaPosicao(400);

Altere para:

var xAleatorio = sorteiaPosicao(600);
var yAleatorio = sorteiaPosicao(400);

Um outro probleminha está aqui:

desenhaCirculo(x, y, raio+20, 'red');

Altere para:

desenhaCirculo(x, y, raio+5, 'red');

Com essas correções você já consegue visualizar o alva na no canvas.

Demais dúvidas posta aqui. Espero ter ajudado.

Att

<canvas width="600" height="400"></canvas>

<script>
  var tela = document.querySelector('canvas');
  var pincel = tela.getContext('2d');
  pincel.fillStyle = 'lightgrey';
  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);
    } 
    function desenhaAlvo(x, y) {
     desenhaCirculo(x, y, raio+20, 'red');    
     desenhaCirculo(x, y, raio+10, 'white');
     desenhaCirculo(x, y, raio+5, 'red');
     }
     function sorteiaPosicao(maximo) {
        return Math.floor(Math.random() * maximo);
    }
    function atualizaTela() {

        limpaTela();
        var xaleatorio = sorteiaPosicao(600);
        var yaleatorio = sorteiaPosicao(400);
        desenhaAlvo(xAleatorio, yAleatorio);
        }



    setInterval(atualizaTela, 1000);    




</script>

Obrigada, mas ainda não deu certo.

solução!

consegui