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

Leitura de código pelo navegador

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 Bernardo Chies karling
| 111k xp | 29 posts

Olá Já consegui resolver a questão, mas mesmo assim fiquei com dúvida do porquê umas das minhas tentativas não funcionou. Me parece que durante a leitura ele ignora as condições "onmouseup" e "onmousedown" e lê apenas o "n=true" ou "n=false", seria o motimo o uso de dois "=", onde o programa lê apenas a ultíma "equação" na linha? 

<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 desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
           tela.onmousedown = n=true;
       if(n){ 

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);
    tela.onmouseup=n=false;

        }

    }

    var n =false;

    tela.onmousemove=desenhaCirculo;

</script>
2 respostas
solução!
por Cássio Murilo
| 1276.4k xp | 2204 posts
Instrutor Agile Master

Fala, Bernardo! Tudo bem contigo?

Realmente o ato de desenhar na tela é constante..

O que eu pensei não vai fugir muito do que está na solução do exercício. Veja abaixo:

<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);

    tela.onmousemove = function (evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if(n){ 

            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
            console.log(x + ',' + y);

        }

    }

    var n = false;

    tela.onmousedown = function() {

        n = true;
    }

    tela.onmouseup = function() {

        n = false;
    }


</script>

Até na documentação sobre OnMouseUp e OnMouseDown mostra outras formas de utilização que podem te ajudar, Bernardo

Um abraço e bons estudos!

por Luiz Gustavo Andrade dos Santos
| 219.4k xp | 158 posts

O código abaixo desenha apenas enquanto o mouse estiver pressionado. Não sei se é isso que você quer, mas acho que vai te ajudar.

<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 desenhaCirculo(evento) {
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (n) { 
            pincel.fillStyle = 'blue';
            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
            console.log(x + ',' + y);
        }
    }

    var n = false;

    function myOnMouseUp() {
        n = false;
    }

    function myOnMouseDown() {
        n = true;
    }

    tela.onmouseup = myOnMouseUp;
    tela.onmousedown = myOnMouseDown;
    tela.onmousemove = desenhaCirculo;

</script>