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

Dúvida simples e um problema recorrente

Declarei novas variáveis e deixei if dentro de outro if, tem algum problema que não consigo ver?

Houve alguma atualização no Chrome ou meu código tem um erro? Fazem alguns dias que a tela do canvas não aparece pra mim, apenas os desenhos feitos após o fillRect de toda tela.

No programa abaixo está na cor preta, mas já tentei em outras também e não funciona.

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    pincel.fillRect = (0, 0, 600, 400);

        var raioMaximo = 40;
    var raioMinimo = 10;
    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) {

              if (raioMaximo >= raio) {
               raio = raio + 10;
           }
        }

        if (evento.altKey) {
            if (raioMinimo < raio) {
                raio = raio - 5;
            }

        }

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

    }

    tela.onclick = desenhaCirculo;

</script>
2 respostas
solução!

Oii, boa noite!

Estou revisando os exercícios, e parei aqui.

Li seu código, e acho que posso te ajudar...

Pelo que vi, a situação está nessa linha

pincel.fillRect = (0, 0, 600, 400);

Não colocamos o "=" para passar os atributos, colocamos direto as coordenadas dentro dos ( ).

Espero ter ajudado. Estava com dificuldade em outra parte do código kkkkk

Ficaria assim o código corrigido:

<canvas width="600" height="400"></canvas>
<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    pincel.fillRect(0, 0, 600, 400); // fiz aqui a alteração

        var raioMaximo = 40;
    var raioMinimo = 10;
    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) {

              if (raioMaximo >= raio) {
               raio = raio + 10;
           }
        }

        if (evento.altKey) {
            if (raioMinimo < raio) {
                raio = raio - 5;
            }

        }

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

    }

    tela.onclick = desenhaCirculo;

</script>

Espero ter ajudado! o/

Olá, o erro está nessa parte do código:

 pincel.fillRect = (0, 0, 600, 400);

Os valores devem ser passados dessa maneira:

    pincel.fillRect(0, 0, 600, 400);

Quanto ao IF dentro de IF, não existe problema.

Acho que seria interessante validar se as duas teclas não estão pressionadas ao mesmo tempo.

if (evento.shiftKey && evento.altKey) {
    alert('SHIFT e ALT estão pressionados ao mesmo tempo!');
    return;
}