1
resposta

por que eu tenho que colocar o parametro "evento" dentro da função?

por que na linha 58 e 31 eu tive que declarar "evento" na função, eu só fiz por que o console pediu. não entendi o por que. parece que está funcionando o script.

<meta charset="UTF-8">

<canvas width="600" height="400"></canvas>

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaPaletaDeCores() {

        desenhaQuadrado(xVermelho, yQuadrados, tamanhoQuadrados, 'red');
        desenhaQuadrado(xVerde, yQuadrados, tamanhoQuadrados, 'green');
        desenhaQuadrado(xAzul, yQuadrados, tamanhoQuadrados, 'blue');

    }

    function lidaComMovimentoDoMouse(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;

        if (desenha && corAtual == 'lightgray') {
            alert('o Pincel está sem tinta! Molhe-o na tinta antes de desenhar')
            desenha = false
            return
        }else if(desenha){    
            if(!((x >= yQuadrados && x < (xAzul+tamanhoQuadrados+raio)) 
                && (y >= yQuadrados && y < (tamanhoQuadrados+raio)))) {
                desenhaCirculo(x, y, raio, corAtual);
            }
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

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

        if ((x >= xVermelho && x < xVerde) && (y >= yQuadrados && y < tamanhoQuadrados)) {
            corAtual = 'red'
        }else if ((x >= xVerde && x < xAzul) && (y >= yQuadrados && y < tamanhoQuadrados)) {
            corAtual = 'green'
        }else if ((x >= xAzul && x < xAzul+tamanhoQuadrados) && (y >= yQuadrados && y < tamanhoQuadrados)) {
            corAtual = 'blue'
        }

    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var desenha = false;
    var corAtual = 'lightgray';
    var xVermelho = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;
    var raio = 5

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    tela.onclick = escolherCor

</script>
1 resposta

Fala, Gabriel! Tudo bem contigo?

O projeto terá a mesma funcionalidade se, em vez de escrevermos evento colocarmos move, por exemplo:

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

E se retirarmos a palavra e não escrever nada, a estrutura aparecerá no browser, mas não conseguiremos desenhar.

Colocamos um argumento porque a função precisa para fazer essa invocação e o fato de colocar a palavra "evento" é porque chamamos esses processos de "evento" ou "event".

Para entender melhor, dê uma olhada na documentação em português ou em inglês que também está bem bacana, com bastantes exemplos sobre os eventos no Javascript

Espero ter contribuído, Gabriel!

Um abraço e bons estudos