1
resposta

Exercio proposto

Pessoal, exercicio executado com sucesso.

comentem meu cod, por favor!

<canvas width="600" height="400">Quadro de Bolinhas</canvas>

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);
    //Variáveis

    var Cor = ['blue', 'red', 'yellow', 'green'];
    var Index = 0; 
    var CorPTBR = ['Azul', 'Vermelha', 'Amarela', 'Verde']
    var Raio = 10;


    //Funções

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        if(desenha){
            pincel.fillStyle = Cor[Index];
            pincel.beginPath();
            if(evento.shiftKey){
                Raio = Raio+10;
            }
            if(evento.ctrlKey && Raio>11){
                Raio = Raio-10;
            }
            pincel.arc(x, y, Raio, 0, 2 * 3.14);
               pincel.fill();
            console.log(x + ',' + y);
        }
    }

    function trocarCor(direito){
        Index++;
        if(Index >= Cor.length){
            Index = 0;
        }
        alert('Sua nova cor é '+CorPTBR[Index]);
        return false;
    }

    function riscandoTela(click){

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

        pincel.fillStyle = Cor[Index];
        pincel.beginPath();
        pincel.lineTo(x, y);
        pincel.fill();

    }
    function escolherCor(){
        var corRecebida = parseInt(prompt("Escolha sua cor:\n0: Azul\n1: Vermelho\n2: Amarelo\n3: Verde"));
        console.log(corRecebida)
        if(corRecebida<Cor.length){
        Index = corRecebida;
        console.log('escolha');
        }else{
            alert('Você não escolheu uma opção valida\n A cor Padrão é Azul');
        }
    }

    tela.oncontextmenu = trocarCor;
    tela.onmousemove = desenhaCirculo;
    escolherCor();

    // ligando e desligando a função de farma anônima

    tela.onmousedown = function() {
        desenha = true;
    }
     tela.onmouseup = function() {
        desenha = false;
    }


</script>
1 resposta

Olá novamente, Antonione!

Parabéns pelo seu projeto, está sensacional! Acredito que já está excelente para subir no github e montar seu portfólio.

A indentação do seu código está ótima, continue com essa boa prática pois isso era lhe ajudar durante toda sua carreira como desenvolvedor.

Meu projeto com seu exercício:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Bons estudos!

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