2
respostas

Sem rastro da circunferência

Olá, pessoal!

Segue sugestão de código pra não deixar rastro da circunferência quando a tela tiver uma cor diferente do white:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Desenha e movimenta esfera.</title>
    <canvas width="600" height="400"></canvas>
</head>
<body>
    <script type="text/javascript">
        var screen = document.querySelector ("canvas");
        var brush = screen.getContext ("2d");
        brush.fillStyle = "black";
        brush.fillRect (0,0,600,400);
        function displayCircle(x,y,radius){
            brush.fillStyle = "grey";
            brush.beginPath();
            brush.arc(x,y,radius,0,2*Math.PI);
            brush.fill();
        }
        var x = 20;
        **function clear(x){ //Apaga o rastro deixado pelo círculo.
            brush.fillStyle = "black";
            brush.fillRect (0,0,600,400);
        }**
        var sense = 1
        function movementCircle(){
            clear();
            if (x>600) {
                sense=-1;

            }else if(x<=0) {
                sense=1;
            }
            displayCircle(x,20,10);
            x=x+sense;
        } 
        setInterval(movementCircle,300);
    </script>
</body>
</html>
2 respostas

Oi Vitor

Muito bom, parabéns!

Só um detalhe:

O <canvas width="600" height="400"></canvas> fica dentro do <body>, o <head> é utilizado para configurações da página.

Parabéns pelo empenho nos estudos e qualquer dúvida pode contar com a gente.

Muito obrigado pela correção, Guilherme!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software