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

Sugestão de código

No if (evento.shiftKey && evento.altKey) encontrei uma falha no código sugerido (o alert é acionado ao pressionar as duas teclas -SHIFT e ALT - e clicar com o botão esquerdo do mouse na tela, porém o círculo é formado mesmo assim), então fiz uma correção usando o return false;. Já na sequencia do código (else if(evento.shiftKey && raio +10 <= 40)) me deparei com outro detalhe. Quando eu usei o SHIFT para fazer o incremento no tamanho, ia tudo OK, porém se eu fizesse uma redução com o ALT, ou qualquer redução em que o tamanho ficasse com múltiplo de 5, e tentasse aumentar até o tamanho máximo, ele travava no tamanho 35, porque o código não permitia que passasse do tamanho 40. Nesse casso, eu acrescentei no código else if(evento.shiftKey && raio == 35) { raio += 5; }.

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

<script>

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

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

    var cor = ['blue', 'red', 'green'];

    var posicao = 0;

    var raio = 10;

    function desenhaCirculo(evento) {

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

        if (evento.shiftKey && evento.altKey) {

            alert('Só aperte uma tecla por vez, por favor!');
            return false;

        } else if(evento.shiftKey && raio +10 <= 40) {

            raio += 10;            

        } else if(evento.shiftKey && raio == 35) {

            raio += 5;

        } else if(evento.altKey && raio > 10) {

            raio -= 5;
        } 

        pincel.fillStyle = cor[posicao];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);     
        pincel.fill(); //preenche o círculo

        console.log('Posição no clique: ' + x + ', ' + y);
    }

    function mudarCor() {

        posicao++;

        if(posicao == cor.length) {

            posicao = 0;
        }
        return false;
    }

    tela.oncontextmenu = mudarCor;
    tela.onclick = desenhaCirculo;

</script>
1 resposta
solução!

Oi, Thiago, tudo bem?

Você pode utiilizar a tópico de sugestão que tem em todas as atividades nos cursos. É só ir nas três bolinhas, logo depois de "próxima atividade" e ir em "sugerir alteração" :} A nossa equipe depois avalia e valida.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software