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

Meu Canvas some da tela

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 lucas_fazandossantos
| 135k xp | 17 posts

Esse é o código e não estou entendendo o motivo dele fazer com que o canvas desapareça:

<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 raio = 10;
    var desenha = false;

    var cor = ['blue', 'red', 'yellow'];
    var corAtual = 0;

    function habilitaDesenho() {
        desenha = true;
    }

    function desabilitaDesenho() {
        desenha = false;
    }

    function mudaCor{
        corAtual++
        if (corAtual >= cor.length) {
            corAtual = 0;
        }
        return false;
    }

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

                if (evento.shiftKey && evento.altKey) {
                    alert ("Só precione uma tecla por vez, por favor!")
                }
                else if (evento.shiftKey && raio + 10 <= 40) {
                    raio = raio + 10;
                }
                else if (evento.altKey && raio - 5 >= 10) {
                    raio = raio - 5;
                }
            pincel.fillStyle = cor[corAtual];
            pincel.beginPath();
            pincel.arc(x, y, raio, 0, 2 * 3.14);
            pincel.fill();
        }
        console.log(x + ',' + y);
    }

    tela.onmousedown = habilitaDesenho;
    tela.onmouseup = desabilitaDesenho;
    tela.oncontextmenu = mudaCor;
    tela.onclick = desenhaCirculo;

</script>
3 respostas
solução!
por Bruno Paschoali Regis
| 207.6k xp | 320 posts
Software Engineer

Olá.

Há alguns problemas no seu código. Pra simular eles, eu copiei todo seu código e salvei em um arquivo HTML. Abri ele no browser e teclei CTRL + SHIFT + i pra acessar o developer tools. Dentro do devtools, na aba de console, após dar um refresh na página, são apontados possíveis erros.

O primeiro está aqui:

function mudaCor{
    corAtual++
    if (corAtual >= cor.length) {
        corAtual = 0;
    }
    return false;
}

Note que após declara a função mudaCor você esqueceu de adicionar os parênteses "mudaCor()", logo o código é quebrado ali.

O próximo erro está na função desenhaCirculo():

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

            if (evento.shiftKey && evento.altKey) {
                alert ("Só precione uma tecla por vez, por favor!")
            }
            else if (evento.shiftKey && raio + 10 <= 40) {
                raio = raio + 10;
            }
            else if (evento.altKey && raio - 5 >= 10) {
                raio = raio - 5;
            }
        pincel.fillStyle = cor[corAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
    }
    console.log(x + ',' + y);
}

O seu console.log() no final da função pega valores das variáveis x e y que só existem caso o código entre no if acima, logo elas ficam com valores undefined. Caso queira sempre logar esses valores, coloque esse log dentro do if.

Outro ponto crucial é que você muda a variável desenha para false no evento de onmouseup e chamada a função desenhaCirculo (que depende da variável desenha como true) no evento de onclick:

tela.onmouseup = desabilitaDesenho;
tela.onclick = desenhaCirculo;

O problema é que a função onmouseup acontece antes da função de click. Logo, a variável desenha sempre vai pra false antes de cair no if (desenha) que está dentro da função desenhaCirculo(). Logo, nunca vai desenhar desse jeito.

Para testar, quando chegar nesse ponto, comente a linha da função do onmouseup:

//tela.onmouseup = desabilitaDesenho;

E aí dê um refresh na página. Desse jeito conseguirá desenha um circulo no canvas a cada clique. Não sei se isso já entrega o proposto, mas fica mais fácil seguir no que precisar ajustar.

Abraços.

por lucas_fazandossantos
| 135k xp | 17 posts

Muito obrigado, realmente uma falta de atenção ja atrapalha tudo, e ali no "onclick" troquei por "onmousemove" e consegui o efeito que eu gostaria, agradeço bastante pela ajuda!!!

por Bruno Paschoali Regis
| 207.6k xp | 320 posts
Software Engineer

Muito bom, conseguiu se virar bem! Boa, parabéns!