Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Desafio do artista

Meu código ficou como segue. Coloquei uma cor para cada Power Ranger na paleta. Eu só gostaria de saber se tem como enxugar a parte dos ifs/elses, onde escolho a cor.

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

<button>Borracha</button>

<script>

    function desenhaQuadrado(x, y, tamanho, cor) {

        pincel.fillStyle = cor;
        pincel.fillRect(x, y, tamanho, tamanho)
        pincel.fill();
    }

    function desenhaCirculo(x, y, raio, cor) {

        pincel.fillStyle = cor;
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * 3.14);
        pincel.fill();

    }

    function desenhaPaletaDeCores() {

        for(var i = 0; i < cores.length; i++) {
            desenhaQuadrado(xPosicao[i], yQuadrados, tamanhoQuadrados, cores[i]);
        }
    }

    function lidaComMovimentoDoMouse(evento) {

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

        if((desenha) && (y - raio > 50)) {

            desenhaCirculo(x, y, raio, corAtual);

            if(evento.shiftKey && raio < 40) {
                raio = raio + 5;
            } else if(evento.altKey && raio > 5 ) {
                raio = raio - 5;
            }
        }
    }

    function habilitaDesenhar() {

        desenha = true;
    }

    function desabilitaDesenhar() {

        desenha = false;
    }

    function escolheCor (evento) {

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

        if((x > 0) && (x < 50) && (y > 0) && (y < 50)) {
            corAtual = "red";
        } else if((x > 50) && (x < 100) && (y > 0) && (y < 50)) {
            corAtual = "green";
        } else if((x > 100) && (x < 150) && (y > 0) && (y < 50)) {
            corAtual = "blue";
        } else if((x > 150) && (x < 200) && (y > 0) && (y < 50)) {
            corAtual = "black";
        } else if((x > 200) && (x < 250) && (y > 0) && (y < 50)) {
            corAtual = "yellow";
        } else if((x > 250) && (x < 300) && (y > 0) && (y < 50)) {
            corAtual = "pink";
        } else if((x > 300) && (x < 350) && (y > 0) && (y < 50)) {
            corAtual = "white";
        } 
    }

    function limpaTela() {

        corAtual = "lightgray";
        lidaComMovimentoDoMouse();
    }

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'lightgray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 5;
    var desenha = false;
    var corAtual = "blue"
    var xPosicao = [0, 50, 100, 150, 200, 250, 300];
    var cores = ["red", "green", "blue", "black", "yellow", "pink", "white"];
    var yQuadrados = 0;
    var tamanhoQuadrados = 50;
    var button = document.querySelector("button");

    desenhaPaletaDeCores(); // mostra os quadrados de seleção de cores

    tela.onclick = escolheCor;

    tela.onmousemove = lidaComMovimentoDoMouse;

    tela.onmousedown = habilitaDesenhar;

    tela.onmouseup = desabilitaDesenhar;

    button.onclick = limpaTela;

</script>
2 respostas
solução!

Olá, Bruna! Tudo bem contigo?

Desculpe a demora em dar um retorno!

Bacana seu código!

Sobre os "ifs", dê uma olhada nessa postagem aqui no fórum onde foi colocado um for no lugar de if.

Acredito que vai te dar outra ideia!

Um abraço e bons estudos, Bruna!

Até mais

Muito obrigada, Cássio. Acabei bolando algo bem parecido. Era só botar a cabeça pra pensar mais.