Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Não entendi quando ele fala sobre atribuir a variável desenha= false e de onde ele tira tela.onmousemove

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 Rodrigo vinicius ferraz
| 34.8k xp | 18 posts
<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 desenha = false;

    function desenhaCirculo(evento) {

        if(desenha) {
            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousemove = desenhaCirculo;

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

</script>
2 respostas
solução!
por Akashi
| 220.4k xp | 284 posts

Rodrigo,

Variáveis recebem/armazenam valores.

Neste caso, a variável 'desenha' recebe dois valores do tipo boolean: false (falso) e true (verdadeiro).

Este caso de valores booleanos traz uma peculiaridade: se você coloca um 'if', normalmente ele compara, por exemplo:

if(i > 3) {....

Se o valor armazenado em i for maior que 3, a comparação i > 3 será verdadeira (true), e o código executará algo. Se for menor ou igual a 3, será false e não executa.

No caso de uma variável que armazena um valor booleano, a comparação poderia ser assim:

if(desenha) {....

ou seja, deixa de ser uma comparação. Se o valor na variável 'desenha' for 'true' (verdadeiro), o código executará algo. Se for 'false', não executa.

A variável 'tela' está lá no começo do código. Recebe e representa o elemento 'canvas'

var tela = document.querySelector('canvas');

onmousedown e onmouseup são eventos quepercebem se o botão esuqerdo do mouse foi pressionado, ou se foi solto.

Estes eventos estão aplicados à variável 'tela' - atrelada ao canvas.

   tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

quando um destes eventos ocorrer, eles invocam/chamam a function à qual estão ligados: habilitaDesenhar e desabilitaDesenhar.

por Rodrigo vinicius ferraz
| 34.8k xp | 18 posts

Agora eu entendi, obrigado!