Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não entendi a ordem da lógica

Boa noite, minha dúvida é sobre a ordem, tentei debugar pra ver o código no chrome mesmo assim não entendi, pra facilitar gravei um vídeo.

https://www.loom.com/share/18fb47c7166c4ad1a0b2d15fb26bbbfa

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

pincel.fillStyle = "rgb(200, 200, 300)";
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;
1 resposta
solução!

Olá Bruna, tudo bem?

Peço desculpas pela demora em obter um retorno

Gostaria de informar que o link que você enviou não está funcionando no momento. No entanto, entendi que sua dúvida é sobre a ordem do código.

O código começa selecionando o elemento canvas do HTML e criando um contexto 2D para ele. Em seguida, é definida uma cor de preenchimento para o pincel e é preenchido um retângulo com essa cor.

Depois disso, há uma função que desenha um círculo na tela quando o mouse é movido sobre o canvas e um botão do mouse está pressionado. Essa função verifica se a variável "desenha" é verdadeira e, se for, obtém as coordenadas do mouse em relação ao canvas e desenha um círculo com o pincel.

As duas funções seguintes, "habilitaDesenhar" e "desabilitaDesenhar", são chamadas quando o botão do mouse é pressionado e solto, respectivamente. Elas simplesmente alteram o valor da variável "desenha" para verdadeiro ou falso.

Espero ter ajudado a esclarecer a ordem do código para você, qualquer dúvida, me coloco à disposição!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!