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

Por que não funcionou ?

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Desenhando com o mouse

por Daniel Pôrto Núñez
| 69.4k xp | 38 posts

Era para fazer um pincel, com função de clique basicamente, fiz esse codigo antes de ver o do instrutor mais não foi. Gostaria que alguém me explicasse o por que:

<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);
    function coordenadas(cord){
        var x = cord.pageX - tela.offsetLeft;
        var y = cord.pageY - tela.offsetTop;
        console.log(x + ', ' + y)
    }
    function desenhaCirculo(evento) {

        pincel.fillStyle = '#ff00c8';
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
        console.log(evento)
    }
    tela.onmousemove = coordenadas;
    tela.onmousedown = desenhaCirculo;


</script>

Meu palpite é que as variáveis x e y tem atribuição de valor dentro da função coordenada e isso "não esta saindo de la ".

2 respostas
solução!
por ricardoaugusto21k
| 284.5k xp | 226 posts

Sim, o problema é o cord que não está chegando no desenhaCirculo.

Fazendo assim, resolve:

function desenhaCirculo(cord, evento) {

          var x = cord.pageX - tela.offsetLeft;
          var y = cord.pageY - tela.offsetTop;
        // ...
}

Mas suponho que você queira x e y sendo calculados pela coordenadas() disponíveis para outras funções. Certo?

Então x e y devem estar em outro escopo. Assim resolve:

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

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

        function coordenadas(cord){
            x = cord.pageX - tela.offsetLeft;
            y = cord.pageY - tela.offsetTop;
            console.log(x + ', ' + y)
        }

        function desenhaCirculo() {
            pincel.fillStyle = '#ff00c8';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }

        tela.onmousemove = coordenadas;
        tela.onmousedown = desenhaCirculo;
    </script>

O console.log(evento) continuava undefined pois não sei o que você vai precisar ali, então retirei do exemplo.

por Marcos Gonçalves dos Santos
| 245.7k xp | 78 posts

Daniel, Primeiro o que você quer que o código apresente?