Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Bolinha cresce e decresce de forma mais simples

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 O bolão que deseja emagrecer!

por Roger Roberto
| 48.4k xp | 19 posts

Após algumas tentativas resolvi o exercício de maneira simples e quero compartilhar. É claro que a solução dada pelo professor é um pouco mais elegante, mas assim funcionou também. 

<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 raio = 10;

    function desenhaCirculo(evento) {

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

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

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

        if (raio <= 10){
        raio = 10
        }

        if (evento.shiftKey) {
           raio = raio + 10;
        }

        if (raio >= 40){
        raio = 40
        }

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

    }

    tela.onclick = desenhaCirculo;

</script>
2 respostas
solução!
por Roger Roberto
| 48.4k xp | 19 posts

Apenas para compartilhar.

por Juliana Américo
| 133.1k xp | 43 posts

Bem parecido com a forma como eu fiz!

<html>

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

<script>

var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");

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

var cores = ['blue', 'red', 'green'];

var raio = 10;

                        //pode ser qualquer nome no lugar do evento
function desenhaCirculo (evento) {
        //parâmetro.retorna a posição do mouse + apenas o canvas, sem as bordas
    var x = evento.pageX - tela.offsetLeft;
    var y = evento.pageY - tela.offsetTop;

                //parâmetro.verifica se a tecla referida está pressionada
    var shift = evento.shiftKey;
    var alt = evento.altKey;

        //se shift estiver pressionado aumenta o raio em 10
    if (shift) {
        raio = raio + 10;
        if (raio >= 40) {
            raio = 40;
        }
    }

        //se alt estiver pressionado diminui o raio em 5
    if (alt) {
        raio = raio - 5;
        if (raio <= 10) {
            raio = 10;
        }
    }

            //desenha um circulo
            pincel.fillStyle = cores[indiceCorAtual];
    pincel.beginPath();
    pincel.arc(x, y, raio, 0, Math.PI*2);
    pincel.fill();

    //com todos esses logs consigo ver no console a posição do clique, o tamanho atual, e se as teclas estava pressionadas
    console.log("shift = " + shift);
    console.log("alt = " + alt);
    console.log(x + ", " + y);
    console.log("raio = " + raio);
    console.log("fim");
}

var indiceCorAtual = 0;

function mudaCor() {
    indiceCorAtual++;
    if (indiceCorAtual >= cores.length) {
        indiceCorAtual = 0;
    }
    console.log("trocou a cor");
    return false;
}

tela.oncontextmenu = mudaCor;
tela.onclick = desenhaCirculo;

</script>

</html>