Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Era uma vez uma bolinha que virou um bolão!

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 Era uma vez uma bolinha que virou um bolão!

por ATHOS CABRAL MORAES
| 107.4k xp | 11 posts

Minha alternativa para o exercício foi multiplicar por 3 o valor do raio.

Mas fiquei na dúvida se em uma outra situação, o código vai respeitar esse critério.

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

    function desenhaCirculo(evento) {

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

        if(evento.shiftKey) {

            raio = raio * 2;
        } 

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

    }

    tela.onclick = desenhaCirculo;

</script>
1 resposta
solução!
por NATHALIA QUEIROZ
| 1837k xp | 4385 posts
Alura Scuba Team Suporte Educacional

Oi Athos, tudo bem?

Agradeço por aguardar um retorno nosso!

Seguindo o seu raciocínio de multiplicar o raio que é 10 por 3, coincidentemente terá o mesmo resultado que o código passado pelo professor, onde é somado o raio no valor de 10 por 20, totalizando 30.

Porém, em outra situação onde o valor do raio seja, por exemplo, 40 o comportamento não será o mesmo. O crescimento da bolinha na multiplicação a cada clique será maior do que na situação onde utilizamos a soma.

No código abaixo temos a soma com o raio no valor 40 somado a 20:

var raio = 40;
    console.log(x + ',' + y);
    if (evento.shiftKey) {
      raio = raio + 20; // o raio passa a valer 60

Se utilizarmos a multiplicação, multiplicando o valor do raio base que é 40 por 3, temos como resultado um círculo com o raio no valor 120 . E o código fica assim:

var raio = 40;
    console.log(x + ',' + y);
    if (evento.shiftKey) {
      raio = raio * 3; // o raio passa a valer 120

Nota-se então que os valores deram diferentes ao ser multiplicados, a bolinha mostra-se maior no segundo exemplo.

Esperto ter ajudado a sanar a sua dúvida, conte conosco para ajudá-lo sempre!

Bons estudos e a gente se vê!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!