Entrar Ainda não tem acesso?
1
resposta

Como apagar o ultimo circulo gerado apos gerar um novo?

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 Mouse, diga-me em que posição estás

por José Paulo 2 Goncalves
| 36.6k xp | 17 posts
<meta charset="UTF-8">

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

<script>

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

    brush.fillStyle = "lightblue";
    brush.fillRect(0, 0, 600, 400);

    function showCircle(event) {


        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

        brush.fillStyle = "navy";
        brush.beginPath();
        brush.arc(x, y, 4, 0, Math.PI * 2);
        brush.fill();

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

    }

    canvas.onclick = showCircle;




</script>

Matricule-se agora e aproveite até 50% OFF

O maior desconto do ano para você evoluir com a maior escola de tecnologia

QUERO APROVEITAR
1 resposta
por André Chaves
| 1967.1k xp | 2579 posts
Instrutor

Oi José, tudo bom?

Você pode, antes de gerar um circulo, limpar o canvas sempre. Assim, quando você fizer o segundo, o primeiro será limpo e assim sucessivamente. Segue exemplo:

function showCircle(event) {
    // aqui limpa, antes de mais nada
        context.clearRect(0, 0, canvas.width, canvas.height);

        var x = event.pageX - canvas.offsetLeft;
        var y = event.pageY - canvas.offsetTop;

        brush.fillStyle = "navy";
        brush.beginPath();
        brush.arc(x, y, 4, 0, Math.PI * 2);
        brush.fill();

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

    }