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

Função para mudar o Raio

Oi, acabei fazendo uma função para mudar o raio, não sei se foi a melhor forma, sinceramente eu achei que ficou um pouco mais claro o que a implementação faz, porém pela resposta do professor e dos outros alunos acaba parecendo realmente mais simples colocar diretamente na função desenhaCirculo. Fico me perguntando o que é mais usual?


<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 cores = ["blue", "red", "green"];
    var i = 0;
    var r = 10;

    function desenhaCirculo(evento) {

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


        mudaRaio(evento);
        console.log(i);
        pincel.fillStyle = cores[i];
        pincel.beginPath();
        pincel.arc(x, y, r, 0, 2 * 3.14);
        pincel.fill();

    }

    function mudaCor() {

        i++;

        if(i >= cores.length) {

            i = 0;        
        }

        return false;

    }

    function mudaRaio(evento) {

        var evento = evento.shiftKey;

        if(evento == true) {

            r = 20;

        } else {

            r = 10;
        }

    }

    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;


</script>

1 resposta
solução!

Perfeito, Jaycon!

Quando isolamos em funções ou variáveis deixamos nosso código de fácil manutenção.

Supondo que em um futuro venha alterar alguns pontos no código, fica mais tranquilo para mexer e evita de alterar um dado e quebrar toda a estrutura

Parabéns pela lógica!

Qualquer dúvida, estamos por aqui ;-)

Um abraço e bons estudos