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

Aumento/Diminuicao do raio

Conseguir fazer que meu codigo aumentasse e diminuisse o raio (diferente do instrutor e nao tao limpo), mas quando diminui ele nao obedece o limite. Criticas e sugestoes, por favor? rsrs

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

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

    pincel.fillStyle = 'gray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;

    function desenhaCirculo(evento) {

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

        console.log(x + ',' + y);

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

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


    tela.onclick = desenhaCirculo;

</script>
2 respostas
solução!

Olá, Pamela.

O raio precisa estar entre 10 e 40, certo? Se sim, você pode corrigir seu código modificando as linhas que contem os testes dos laços de repetição apenas removendo o sinal de =, tanto no limite superior quanto no inferior, pois quando o raio está com valor igual aos limites (10 ou 40) o código ainda entra no laço, executando a linha raio = raio - 5 ou a linha raio = raio + 10.

modifiquei as linhas e adicionei uma linha para que seja exibido o tamanho do raio no terminal e o código ficou assim:

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

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

    pincel.fillStyle = 'gray';
    pincel.fillRect(0, 0, 600, 400);

    var raio = 10;

    function desenhaCirculo(evento) {

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



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

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

        console.log('posição: ' + x + ',' + y);
        console.log('raio: ' + raio);
    }


    tela.onclick = desenhaCirculo;

</script>

espero ter ajudado.

Ajudou sim, muito obrigada =)