Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Solução código - Trocando de cor

Fala galera,

Olha eu aqui novamente com outro código legal que deu muita dor de cabeça novamente rsrsrsr. Espero que seja util. :)

<h1>..:: Desenhe ::..</h1>
<canvas id="tela" width="400" height="300"></canvas>
<br>
Cor selecionada/ativa: <input id="corCirculo" size="2" value="blue">
<button id="remover">Remover</button>

<script>
    var tela = document.querySelector('#tela');
    var lapis = tela.getContext('2d');

    var tabelaTiros = [];
    var tabelaCor = ['blue', 'red', 'green']
    var idCor = 0; // começa com blue <input>

    function montaTela(fundo, borda) {
        lapis.fillStyle = fundo;
        lapis.fillRect(0, 0, 400, 300)
        lapis.strokeStyle = borda;
        lapis.strokeRect(0, 0, 400, 300)
    }

    montaTela('Cyan','DarkRed');

    function removeTiros() {
        var aux = document.querySelector('#corCirculo');
        for (var i = tabelaTiros.length ; i >= 0 ; i = i-3) {
            if (tabelaTiros[i] == aux.value) {
                tabelaTiros.splice(i, 3);
            }
        }

        montaTela('Cyan','DarkRed');

        for (var i = (tabelaTiros.length - 3) ; i >= 0 ; i = i-3) {
            refazTiros(tabelaTiros[i], tabelaTiros[i+1], tabelaTiros[i+2]);
        }
    }

    function refazTiros(cor, x, y) {
        lapis.fillStyle = cor;
        lapis.beginPath();
        lapis.arc(x, y, 10, 0, 2*Math.PI);
        lapis.fill();
    }

    var remover = document.querySelector('#remover');
    remover.onclick = removeTiros;

    function tiro(evento) {
        lapis.fillStyle = tabelaCor[idCor];
        tabelaTiros.push(tabelaCor[idCor]);
        var x = evento.pageX - tela.offsetLeft;
        tabelaTiros.push(x);
        var y = evento.pageY - tela.offsetTop;
        tabelaTiros.push(y);
        lapis.beginPath();
        lapis.arc(x, y, 10, 0, 2*Math.PI);
        lapis.fill();
        for (var i=0 ; i < tabelaTiros.length ; i++) {
            console.log(tabelaTiros[i]);
        }
    }

    tela.onclick = tiro;

    function trocaCor() {
        idCor++
        if (idCor >= tabelaCor.length) {
            idCor = 0;
        }
        var aux = document.querySelector('#corCirculo'); // ou var a = document.getElementById('corCirculo');
        aux.value = tabelaCor[idCor]
        return false;
    }

    tela.oncontextmenu = trocaCor;
</script>
1 resposta
solução!

Fala Fabio! Tudo bem, cara?

Parabéns pelo código!! O interessante é realmente ficar fazendo coisas a mais para você aprender e fixar o conteúdo. =)

Abraço e bons estudos,

Fábio