1
resposta

Consegui! E acionei também a funcionalidade de diminuir o Circulo,mas Da pra melhorar o Código?

Olá, Minha primeira Postagem no fórum, estou feliz por ter conseguido realizar a tarefa e adicionei uma funcionalidade extra que é diminuir o Circulo, mas Gostaria que o código pudesse ser analisado, e receber indicações do que pode melhora.

Desde já agradeço. Abraços!!

insira se

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

<meta charset="UTF-8">

<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', 'black','orange'];
   var indiceCorAtual = 0;
   var raio = 10;
   var menosRaio = -10;


       function pulaLinha(){
           document.write('<br><br>');
           return false;

       }

       function mostra(frase) {
           document.write(frase);
           pulaLinha();


       }

    function desenhaCirculo(evento){

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


        if(evento.shiftKey){
            raio = raio +10;


        }

        if(evento.ctrlKey){

            raio = raio - 10;
        }

        pincel.fillStyle = cores [indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

       }

       function mudacor(){

           indiceCorAtual++

           if(indiceCorAtual >= cores.length){
               indiceCorAtual = 0


           }

           return false;
       }

       tela.onclick = desenhaCirculo;
       tela.oncontextmenu = mudacor;


       pulaLinha()
       mostra("Instruções:")
       mostra("Click com Botão esquerdo Para Pintar um Circulo.");
       mostra("Clique Com Botão direito Para Alternar as Cores.");
       mostra("Segure Shift para aumentar ao tamanho do Circulo.");
       mostra("Segure Ctrl para voltar circuloao tamanho anterior.");
       mostra("Cores Disponiveis:");
       mostra("01 = Azul");
       mostra("02 = Red");
       mostra("03 = Verdel");
       mostra("04 = Laranja");
       mostra("05 = Preto");

</script>u código aqui
1 resposta

Olá William, tudo certo?

Parabéns pelo seu código, e por ter pensado em uma função extra ao mesmo. Inclusive se não me engano em um exercício mais pra frente no curso ele pede exatamente para você criar essa função de diminuir o círculo.

Continue assim e bons estudos!