1
resposta

Reduzindo o número de linhas

Em vez de criar 2 "ifs" para mudar o valor da variável "sentido", fiz uma operação matemática em apenas 1 if e a condição "Ou" (||). Também utilizei o raio do círculo nos limitadores, para que a bolinha não "saia" do canvas em momento algum, nem em parte. O bacana é que há como mudar a velocidade de duas formas: Através do setInterval, e também através do valor da variável "sentido". Quanto maior, mais rápido, sob pena de se perder a suavidade do movimento. Com o setInterval estamos limitados em 1ms de delay no máximo. Há como diminuir este valor?

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

<script type="text/javascript">

    var tela = document.querySelector("canvas");
    var pincel = tela.getContext("2d");
    pincel.fillStyle = "white";
    pincel.fillRect(0,0,600,400);

    var raio = 10;
    var x = raio;
    var sentido = 1;

    function desenhaCirculo(x,y,raio) {

        pincel.fillStyle = "blue";
        pincel.beginPath();
        pincel.arc(x,y,raio,0,2*Math.PI);
        pincel.fill();

    }

    function limpaTela () {
        pincel.clearRect(0,0,600,400);
    }

    function atualizaTela() {
        limpaTela();
        desenhaCirculo(x,20,raio);
        x = x + sentido;
        if(x >= (600 - raio) || x <= (0 + raio)) {
            sentido = sentido * -1;            
        }
    }

    setInterval(atualizaTela,10);

</script>
1 resposta
pincel.arc(x<601 ? x : 1200-x, y, raio, 0, 2 * Math.PI); 
x++; if(x>1200) x = 0;

Eu também tentei usar um número menor de linhas. Consegui alterando essas duas linhas. Mas a bolinha continuou escapando do canvas nas laterais, isso não consegui resolver.