[Dúvida] Alert no código | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

Solucionado (ver solução)

Solucionado
(ver solução)

6
respostas

por Mayla Siqueira

| 14.7k xp | 6 posts

Olá, gostaria de uma ajuda, estou tentando fazer com que o alert seja exibido, dizendo qual é a cor do pincel, porém quando ele é exibido, apenas aparece como undefined, mas o restante do código funciona perfeitamente.

<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 corEscolhida = 0;

    function desenhaCirculo(evento) {

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

    tela.onclick = desenhaCirculo;


    function mudaCor() {
        corEscolhida ++;
        if (corEscolhida >= cores.length){
            corEscolhida = 0;
        }
        alert('Cor Atual ' + desenhaCirculo[cores]);
        return false
    }

    tela.oncontextmenu = mudaCor;

</script>

6 respostas

por Felipe Moreno Borges

| 1130.9k xp | 1471 posts

Instrutor Desenvolvedor Android/iOS

14/01/2019

Mayla, bom dia!

Isso acontece por causa da seguinte linha

alert('Cor Atual ' + desenhaCirculo[cores]);

A variavel desenhaCirculo[cores] não existe, por isso o retorno da undefined. Na minha solução eu peguei a variável corEscolhida e verifiquei qual era a atribuição dela, podendo assim saber a cor graças a array cores. Aquela linha ficou da seguinte forma:

  if (corEscolhida == 0) {
          alert('Cor atual: Azul');
        }else if (corEscolhida == 1) {
          alert('Cor atual: vermelho');
        }else{
          alert('Cor atual: Verde');
        }

Existem várias maneiras de fazer esse exercício essa é uma delas.

Bons estudos!

por Mayla Siqueira

| 14.7k xp | 6 posts

14/01/2019

Entendi, será que não teria como o alert só me retornar o nome que estiver na posição sendo testada? se for = 0, me retornar blue, por exemplo?

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

14/01/2019

Oi Mayla tudo bem?

Tem sim, o código abaixo só mostra a cor do pincel quando ela for trocada. Dá uma testada e veja se é isso que precisa.

<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 corEscolhida = 0;

    function desenhaCirculo(evento) {

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

    tela.onclick = desenhaCirculo;


    function mudaCor() {
        corEscolhida ++;
        if (corEscolhida >= cores.length){
            corEscolhida = 0;
        }
        if (corEscolhida == 0) {
          alert('Cor atual: Azul');
        }else if (corEscolhida == 1) {
          alert('Cor atual: Vermelho');
        }else{
          alert('Cor atual: Verde');
        }

        return false
    }

    tela.oncontextmenu = mudaCor;

</script>

Espero ter ajudado!!!!

solução!

por Maison Galvão

| 1029.1k xp | 1128 posts

Moderador Desenvolvedor de Sistemas

14/01/2019

Oi Mayla nessa linha houve um equivoco:

alert('Cor Atual ' + desenhaCirculo[cores]);

Ao invés de mostrarmos o vetor cores com a cor Selecionada estamos chamando a função desenhaCirculo e passando um parâmetro que ela não trabalha.

Por isso se o que queremos é a cor Selecionada devemos fazer a seguinte alteração:

alert('Cor Atual ' + cores[corEscolhida]);

O nome do seu vetor é cores e a variável indice que você escolheu se chama corEscolhida.

Somente!

Espero ter ajudado e bons estudos.

por Mayla Siqueira

| 14.7k xp | 6 posts

21/01/2019

Obrigada a quem se dispôs a ajudar, eu queria algo mais simples, só para saber qual era a cor, mas testarei os demais códigos, obrigada.

por André Victor Ruiz Pedroso

| 2101.7k xp | 3838 posts

Moderador Analista Pleno

21/01/2019

Sei que o tópico já fechou rsrsrss.

Mas tive uma ideia muito boa quando li seu e-mail mais cedo. Colocar um botão input color para selecionar a cor dentre todas as cores possíveis igualzinho no paint.

E assim liberamos o botão direito para poder copiar ou salvar a imagem.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Quase um Paint</title>
</head>

<body>
    <canvas width="600" height="400"></canvas>
    <input type="color" id="input_color" onchange="mudaCor(this.value)" value="#0000ff">

    <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 corEscolhida = 0;
        pincel.fillStyle = cores[corEscolhida];

        function desenhaCirculo(evento) {

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

            pincel.beginPath();
            pincel.arc(x, y, 10, 0, 2 * 3.14);
            pincel.fill();
            console.log(x + ',' + y);
        }

        tela.onclick = desenhaCirculo;


        function mudaCor(rgb) {
            pincel.fillStyle = rgb;
        }

        tela.oncontextmenu = mudaCor;

    </script>
</body>

</html>