Solucionado (ver solución)
Solucionado
(ver solución)
7
respuestas

Como arreglo este error en "Tiro al blanco"

Hola, se queda pintada parte de la Diana fuera del canvas cuando se reproduce, les dejo una imagen. Como puedo hacer para que no quede asi!Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

7 respuestas

Armando puedes pasar tu código para ver. Pareciera que estas dibujando y montando otro canvas sobre lo que haces.

José, muchas gracias por responder. Adjunto mi código para que revises

<canvas width="700" height="800"></canvas>

<script>

    let screen = document.querySelector("canvas");
    let brush = screen.getContext("2d");
    brush.fillStyle = "lightgreen";
    brush.fillRect(0, 0, 700, 500);

    let radio = 10;

    function circleDesign(x, y, radio, color) {
        brush.fillStyle = color;
        brush.beginPath();
        brush.arc(x, y, radio, 0, 2 * Math.PI);
        brush.fill();

    }

    function screenClear() {

        brush.clearRect(0, 0, 700, 500);
    }

    let y = 0;
    let sense = 1;

    function objetiveDesign(x, y) {
        circleDesign(x, y, radio + 20, "black");
        circleDesign(x, y, radio + 10, "white");
        circleDesign(x, y, radio, "red");
    }

    function rafflePosition(maximo) {

        return Math.floor(Math.random() * maximo)
    }
    let xRandom = rafflePosition(700);
    let yRandom = rafflePosition(500);

    function updateScreen() {
        screenClear();
        let xRandom = rafflePosition(700);
        let yRandom = rafflePosition(500);
        objetiveDesign(xRandom, yRandom);
        x++;

    }

    setInterval(updateScreen, 200);

</script>

Armando estos son los detalles:

<canvas width="700" height="800"></canvas> // Tu canvas es de 800 de alto
brush.fillRect(0, 0, 700, 500); // Dibujas a 500 de altura
 brush.clearRect(0, 0, 700, 500); // borras a 500 de altura, por ello no borra lo que queda entre 500 y 800 (por debajo)

Cambia el tamaño del canvas y anexa estas lineas para que siga con el fondo

function screenClear() {
    brush.clearRect(0, 0, 700, 500);
    brush.fillStyle = "lightgreen";
    brush.fillRect(0, 0, 700, 500);
  }

Espero que esta sea la soluciona tú inconveniente.

Jose perfecto, funciono. Otra pregunta para que necesitaria agregar esas ultimas lineas? lo que hice fue igualar el canvas a 500 de altura

solución!

Cuando borras es completo, diana y fondo, es por ello que te queda blanco la pantalla, de esta forma vuelves a dejar el fondo

Ah ok, ahora entendi todo Jose, te agradezco mucho, que tengas buen dia !

Excelente. Éxitos (También soy de Venezuela)