1
resposta

[Projeto] Resolução do exercício [Com extras]

Segue a resolução do exercício, porem com algumas modificações que vi no forum e acabei montando desta forma!

  • Randomização das cores
  • O Aumento do circulo eu tive uma resolução diferente e que está funcional, caso tenham mais ideias é sempre bem vinda!
  • Bordas pretas e finas para dar profundidade a cada aumento do circulo.
  • Caso tenham mais alguma ideia é só mandar, quanto mais implementação melhor, estou aberto a sugestões para que o exercicio fique a cada modificação fique mais divertido!
 <canvas width="600" height="400"></canvas>

    <script>

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

        var cores = ['blue', 'red', 'green', 'purple', 'white', 'yellow']; //PALETA DE CORES PARA ALTERAÇÃO DAS BOLINHAS
        var indiceCorAtual = 0; 

        var raio = 10;

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



       function desenhaCirculo(evento){

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

            pincel.fillStyle = cores[indiceCorAtual];
            pincel.beginPath();
            if (evento.shiftKey){
                pincel.arc(x , y , raio++ , 0 , 2 * 3.14); // SE PRESSIONADO A BOLINHA AUMENTA GRADATIVAMENTE!
                pincel.fill();
            }else{
                pincel.arc(x , y , raio , 0 , 2 * 3.14);  //SE NÃO PRESSIONADO O TAMANHO DA BOLINHA É DE 10!
                pincel.fill();
                console.log(x +',' + y);
            }
            pincel.lineWidth = 2; //ESPESSURA DA BORDA
            pincel.strokeStyle = "black"; //COR DA BORDA
            pincel.stroke();
        }

        function mudaCor(){    //DEIXA AS CORES EM ORDEM ALEATORIA
           indiceCorAtual = Math.round(Math.random() * 6);
           if(indiceCorAtual >= cores.length){
            indiceCorAtual = 0;
           }
           return false;

        }


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

Ficou legal , uma coisa que pode fazer é tentar fazer em css a parte dos círculos.