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

Tenho duas duvidas sobre o código...

Olá,

Consegui fazer o código muito similar ao que esta na resposta e ambos funcionam da mesma forma. Porém observei que, ao clicar com o botão direito, ele também cria as bolinhas. Além disso, se mover o mouse rápido, cria um espaço entre as bolinhas. Não entendi por quê isso acontece.

Obrigado.

2 respostas
solução!

Boa tarde.

Poste seu código.

A respeito de passar o mouse rápido é uma limitação da solução focada em lógica, sem entrar em questões técnicas com foco exclusivo em JavaScript. Mas entenda que o JavaScript está gastando processamento para lidar com o movimento do mouse e desenhar ao mesmo tempo e didaticamente falando ele tem que dividir a tarefa dele nessas duas operações. Por isso os espaços quando move o mouse rapidamente, ele se perde um pouquinho.

Sucesso e bom estudo meu aluno.

<canvas width="600" height="400"></canvas>
<br>
Escolha uma cor <input type="color">

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

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

    var desenhar = false;

    tela.onmousemove = function (evento) {

        if (desenhar) {

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

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

    tela.onmousedown = function(){

        desenhar = true;

    }

    tela.onmouseup = function(){

        desenhar = false;
    }

</script>