1
resposta

O código do instrutor não funciona porque falta a chamada da função de desenho do círculo???

Por favor, verifiquem se estou correto na minha afirmação?

Verifiquei que o código do instrutor não funciona porque falta a chamada da função de desenho do círculo.

Aí fiz este código, inserindo a chamada à função, mas pasando o evento como variável.

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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

    var i = 0;
    var cores = ['blue','red','green'];

    function desenhaCirculo(evento) {


        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[i];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14)
        pincel.fill();

        console.log(i + ' ' + x + ' , ' + y);


    }



    tela.onclick = desenhaCirculo;


    function mudaCor(evento) {

        i++;

         if (i >= cores.length) {

               i = 0
         }    
    console.log(i + 'xxx' + cores[i]);
    desenhaCirculo(evento);
    return false;
    }

    tela.oncontextmenu = mudaCor;   

</script>
1 resposta

Boa tarde, Antonio! Tudo bem?

Testei o código do professor aqui e está funcionando, ele está chamando a função desenhaCirculo aqui tela.onclick = desenhaCirculo;.

Parabéns por conseguir contornar o problema que deu quando você testou e realizar a atividade! Quando botamos nosso conhecimento em prática que observamos o quanto estamos aprendendo.

Bons estudos!