Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Exercício Trocando de cor >> Complementando Programa incluindo leitura da cor escolhida

Referente ao curso JavaScript e HTML: pratique lógica com desenhos, animações e um jogo, no capítulo Interagindo com o usuário e atividade Trocando de cor

por Klaudius Henrique dos Santos Soares
| 31.3k xp | 4 posts
Analista Sênior Engenharia Elétrica Eletrônica

Na função mudaCor() inseri um alerta apenas para indicar qual a cor que foi escolhida quando aperta o botão direito. Dessa forma fica fácil em saber qual a cor escolhida.

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

    var cores = ['blue', 'red', 'green']
    var indiceCorAtual = 0; // começa com blue

    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cores[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y);

    }

    function mudaCor() {

        indiceCorAtual++;


        if(indiceCorAtual >= cores.length) {
            indiceCorAtual = 0; // volta para a primeira cor, azul
        }
        alert('A cor escolhida foi '+ cores[indiceCorAtual]); // Alerta para indicar a cor escolhida
        return false; // para não exibir o menu padrão do canvas
    }

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

</script>

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

4 respostas
solução!
por João Victor Santos Dias
| 36.4k xp | 12 posts

Nuss nosso código ficou muito parecido !

coloquei uma linha de cód que indica a cor no html pra não ter que ficar piscando no Alert olha ai pode agregar no seu cód!

<meta charset="UTF-8">

<h1>Bolinha de gorfe</h1>
<p>Clique com o esquerdo para desenhar una bolinha e derecho para trocar a cor da bolinha </p>
<p id="corID"></p>

<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);
    var cor= ["blue","green","red"];
    var indiceCorAtual = 0; //Indice da cor começando em blue 
    function desenhaCirculo(evento) {

        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        pincel.fillStyle = cor[indiceCorAtual];
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * 3.14);
        pincel.fill();
        console.log(x + ',' + y); //Deixei só pra marcar mesmo pode tirar se quiser

    }


    function mudaCor() {
        indiceCorAtual++;

        if(indiceCorAtual >= cor.length ){
          indiceCorAtual = 0;
        }

        document.getElementById("corID").textContent="Cor atual é: " + cor[indiceCorAtual]; // Troco o texto do html para cor atual
        return false; // Retorna falso pq se vier True ele abre o menuzinho 
    }
    document.getElementById("corID").textContent="Cor atual é: " + cor[indiceCorAtual];
    tela.onclick = desenhaCirculo;
    tela.oncontextmenu = mudaCor;



</script>
por Klaudius Henrique dos Santos Soares
| 31.3k xp | 4 posts
Analista Sênior Engenharia Elétrica Eletrônica

João, muito bom... ficou muito mais prático. Top!

por Felipe Adriano de Couto Lucca
| 65.2k xp | 39 posts
FUTURO DEV

Ficou top! Parabéns

por Kayo
| 47.1k xp | 2 posts

Ficou muito bom mesmo!