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

Desta forma, a bolinha não cresce. Porque?

Olá, defini um conjunto contendo as medidas do raio da minha bolinha junto a variável raio, e disse ao programa que se o evento.shiftKey estiver pressionado, então a var r que recebe o parametro deveria valer 1, que no caso seria a segunda posição do meu conjunto raio... a lógica parece estar correta, mas não funciona... Onde estou errando?

<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', 'red', 'green', 'yellow'];
    var i = 0;

    var raio = [10, 50];
    var r = 0;

        if(evento.shiftKey){
            r = 1;
        }


    function desenhaCirculo(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        console.log('Eixo X: ' + x + '; Eixo Y: ' + y + ';')
        pincel.fillStyle = cor[i];
        pincel.arc(x, y, raio[r], 0, 2 * 3.14);
        pincel.fill();
    }

    tela.onclick = desenhaCirculo;


    function mudaCor(evento){
        if(i <= cor.length){
            i++;
        } else {
            i = 0;
        }

        return false;
    }

    tela.oncontextmenu = mudaCor;


</script>
4 respostas
solução!

Boa tarde, Matheus! Você deveria colocar esta condição de a tecla SHIFT estar apertada ou não dentro da função desenhaCirculo, pois justamente nela que você está capturando as informações do parâmetro evento e, da forma como está, ela não recebe nenhuma informação do seu teclado oriunda deste parâmetro. Além disso, é importante acrescentar o comando pincel.beginPath(); nesta função também, para que não haja problemas na criação dos círculos no ato de clicar. Segue abaixo o código:

<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', 'red', 'green', 'yellow'];
    var i = 0;

    var raio = [10, 50];
    var r = 0;




    function desenhaCirculo(evento){
        var x = evento.pageX - tela.offsetLeft;
        var y = evento.pageY - tela.offsetTop;
        console.log('Eixo X: ' + x + '; Eixo Y: ' + y + ';')
        pincel.fillStyle = cor[i];

        if(evento.shiftKey){
            r = 1;
        }

        pincel.beginPath();
        pincel.arc(x, y, raio[r], 0, 2 * 3.14);
        pincel.fill();
    }

    tela.onclick = desenhaCirculo;


    function mudaCor(evento){
        if(i <= cor.length){
            i++;
        } else {
            i = 0;
        }

        return false;
    }

    tela.oncontextmenu = mudaCor;


</script>

Boa noite, Nicolas!!! Obrigado pela resposta, bastante satisfatória!

Sobre o pincel.beginPath(); ter sumido, acredito que foi justamente por conta de ter mexido tanto no código, alterando as posições do if(evento.shiftKey) que devo ter acidentalmente apagado ele...

Ainda tenho algumas dúvidas sobre onde e como colocar algumas variaveis, se dentro ou fora da função e etc... mas penso estar pegando o jeito rsrsrs.

Obrigado pela resposta, Abraços!!!

Boa noite, Matheus!! Disponha, de pouco em pouco você vai se ajustando, um grande abraço, bons estudos! (งツ)ว

Obrigado, pra você também!