1
resposta

Minha versão - Também desenha com um clique só , muda cor (botão direito) e tamanho (shift e alt)

<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);

    //variaveis
    var cores = ["blue", "red", "green", "pink", "black", "yellow", "White"]
    var indiceCor = 0;
    var tamanho = 10;
    var desenharSegurando = false;
    var desenharClique = false;

    //para mudar cor
    tela.oncontextmenu = function (){
        indiceCor++;
        if(indiceCor >= cores.length){
        indiceCor = 0
        }
        return false;
    }

    //função para desenhar o circulo pressionando botao do mouse
    function desenhaCirculoSegurando(evento) {

        if (desenharSegurando){

            if (evento.shiftKey && evento.altKey){
                alert("Aperte uma tecla por vez");
            } else if (evento.shiftKey && tamanho <= 40){
                tamanho = tamanho + 10;
            } else if (evento.altKey && tamanho - 5 >= 10){
                tamanho = tamanho - 5;
            }

            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cores[indiceCor];
            pincel.beginPath();
            pincel.arc(x,y,tamanho,0,2*3.14)
            pincel.fill();
        }         
    }
    //função para desenhar o circulo com um clique so 
    function desenhaCirculoClique(evento) {

        if (desenharClique){

            if (evento.shiftKey && evento.altKey){
                alert("Aperte uma tecla por vez");
            } else if (evento.shiftKey && tamanho <= 40){
                tamanho = tamanho + 10;
            } else if (evento.altKey && tamanho - 5 >= 10){
                tamanho = tamanho - 5;
            }

            var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cores[indiceCor];
            pincel.beginPath();
            pincel.arc(x,y,tamanho,0,2*3.14)
            pincel.fill();

        }
    }         

    //para desenhar com um clique só
    tela.onclick = function (){
        desenharClique = true;
        tela.onclick =  desenhaCirculoClique;
    }

    //para desenhar segurando
    tela.onmousemove = desenhaCirculoSegurando; 

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

</script>

Queria deixar o código mais enxuto, mas não consegui até o momento, se alguém tiver alguma dica será de grande ajdua. Obrigada!

1 resposta

Olá Poliana, tudo bem? Espero que sim

Analisando o seu projeto já deixo meus parabéns, super funcional e bem divertido!

Quanto ao seu código não há muitos espaços para reduzir linhas, ser funcional é o que mais importa nesse primeiro contato, mas encontrei um curto trecho de código que pode ser reduzido e para futuras implementações não vai mais precisar reescrever todo o código, vamos lá.

Ao analisar seu código vemos uma repetição de comandos:

var x = evento.pageX - tela.offsetLeft;
 var y = evento.pageY - tela.offsetTop;
 pincel.fillStyle = cores[indiceCor];
 pincel.beginPath();
 pincel.arc(x,y,tamanho,0,2*3.14)
 pincel.fill();

Esse bloco de código é executado em duas funções na function desenhaCirculoSegurando(evento) e na function desenhaCirculoClique(evento) A fim de ajudar a reduzir o seu código podemos fazer uma função que guarde esse bloco de código e quando necessário só a chamamos, ficando um código mais prático. Para isso vamos criar a função circulo que vai guardar esse bloco ficando assim:

  function circulo(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCor];
        pincel.beginPath();
        pincel.arc(x,y,tamanho,0,2*3.14)
        pincel.fill();
    }

depois basta chamar onde anteriormente estava essas linhas de código, neste exemplo vou chamar na função function desenhaCirculoClique(evento) assim:

function desenhaCirculoClique(evento) {
        if (desenharClique){

            if (evento.shiftKey && evento.altKey){
                alert("Aperte uma tecla por vez");
            } else if (evento.shiftKey && tamanho <= 40){
                tamanho = tamanho + 10;
            } else if (evento.altKey && tamanho - 5 >= 10){
                tamanho = tamanho - 5;
            }
            circulo(evento); //função chamada
        }
    }  

Código completo:

<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);

    //variaveis
    var cores = ["blue", "red", "green", "pink", "black", "yellow", "White"]
    var indiceCor = 0;
    var tamanho = 10;
    var desenharSegurando = false;
    var desenharClique = false;

    //para mudar cor
    tela.oncontextmenu = function (){
        indiceCor++;
        if(indiceCor >= cores.length){
        indiceCor = 0
        }
        return false;
    }

    function circulo(evento){var x = evento.pageX - tela.offsetLeft;
            var y = evento.pageY - tela.offsetTop;
            pincel.fillStyle = cores[indiceCor];
            pincel.beginPath();
            pincel.arc(x,y,tamanho,0,2*3.14)
            pincel.fill();}

    //função para desenhar o circulo pressionando botao do mouse
    function desenhaCirculoSegurando(evento) {

        if (desenharSegurando){

            if (evento.shiftKey && evento.altKey){
                alert("Aperte uma tecla por vez");
            } else if (evento.shiftKey && tamanho <= 40){
                tamanho = tamanho + 10;
            } else if (evento.altKey && tamanho - 5 >= 10){
                tamanho = tamanho - 5;
            }

            circulo(evento);
        }        
    }
    //função para desenhar o circulo com um clique so
    function desenhaCirculoClique(evento) {

        if (desenharClique){

            if (evento.shiftKey && evento.altKey){
                alert("Aperte uma tecla por vez");
            } else if (evento.shiftKey && tamanho <= 40){
                tamanho = tamanho + 10;
            } else if (evento.altKey && tamanho - 5 >= 10){
                tamanho = tamanho - 5;
            }

            circulo(evento);

        }
    }        

    //para desenhar com um clique só
    tela.onclick = function (){
        desenharClique = true;
        tela.onclick =  desenhaCirculoClique;
    }

    //para desenhar segurando
    tela.onmousemove = desenhaCirculoSegurando;

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

</script>

Poliana, novamente dar os parabéns ao seu projeto e obrigado por compartilhar o mesmo, caso tenha outra dúvida me coloco a disposição!

Um grande abraço e até mais!!!!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!