Skip to main content
se añadieron 120 caracteres en el cuerpo
Origen Enlace
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []

function randomGraph() {
    return {
        x: Math.random() * 500,
        y: Math.random() * 500,
        w: 5 + Math.random() * 70,
        h: 5 + Math.random() * 70
    }
}

function middleX(g) {
    return g.x + (g.w / 2)
}

function middleY(g) {
    return g.y + (g.h / 2)
}

function draw() {
    ctx.clearRect(0, 0, 500, 500);

    let c = 2 + Math.trunc(Math.random() * 5)
    let columns = c

    grafos.length = 0
    for (let i = 0; i < c; i++) {
        grafos.push(randomGraph())
    }

    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0, 0, 500, 500);

    ctx.fillStyle = "#00FF00";

    for (let i = 0; i < grafos.length; i++) {
        ctx.strokeStyle = "#0000FF";
        //ctx.beginPath() // <-- aca arregla el problema
        ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.stroke();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#FF0000";

    for (let y = 0; y < columns; y++) {
        for (let x = 0; x < columns; x++) {
            let index = (y * columns + x) % grafos.length
            let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
            //console.log('index', index, index2)
            //ctx.beginPath() // <-- aca arregla el problema
            ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
            ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
            ctx.stroke()
        }
    }

    window.requestAnimationFrame(draw)
}

window.requestAnimationFrame(draw)
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []

function randomGraph() {
    return {
        x: Math.random() * 500,
        y: Math.random() * 500,
        w: 5 + Math.random() * 70,
        h: 5 + Math.random() * 70
    }
}

function middleX(g) {
    return g.x + (g.w / 2)
}

function middleY(g) {
    return g.y + (g.h / 2)
}

function draw() {
    ctx.clearRect(0, 0, 500, 500);

    let c = 2 + Math.trunc(Math.random() * 5)
    let columns = c

    grafos.length = 0
    for (let i = 0; i < c; i++) {
        grafos.push(randomGraph())
    }

    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0, 0, 500, 500);

    ctx.fillStyle = "#00FF00";

    for (let i = 0; i < grafos.length; i++) {
        ctx.strokeStyle = "#0000FF";
        ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.stroke();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#FF0000";

    for (let y = 0; y < columns; y++) {
        for (let x = 0; x < columns; x++) {
            let index = (y * columns + x) % grafos.length
            let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
            //console.log('index', index, index2)
            ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
            ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
            ctx.stroke()
        }
    }

    window.requestAnimationFrame(draw)
}

window.requestAnimationFrame(draw)
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []

function randomGraph() {
    return {
        x: Math.random() * 500,
        y: Math.random() * 500,
        w: 5 + Math.random() * 70,
        h: 5 + Math.random() * 70
    }
}

function middleX(g) {
    return g.x + (g.w / 2)
}

function middleY(g) {
    return g.y + (g.h / 2)
}

function draw() {
    ctx.clearRect(0, 0, 500, 500);

    let c = 2 + Math.trunc(Math.random() * 5)
    let columns = c

    grafos.length = 0
    for (let i = 0; i < c; i++) {
        grafos.push(randomGraph())
    }

    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0, 0, 500, 500);

    ctx.fillStyle = "#00FF00";

    for (let i = 0; i < grafos.length; i++) {
        ctx.strokeStyle = "#0000FF";
        //ctx.beginPath() // <-- aca arregla el problema
        ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.stroke();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#FF0000";

    for (let y = 0; y < columns; y++) {
        for (let x = 0; x < columns; x++) {
            let index = (y * columns + x) % grafos.length
            let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
            //console.log('index', index, index2)
            //ctx.beginPath() // <-- aca arregla el problema
            ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
            ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
            ctx.stroke()
        }
    }

    window.requestAnimationFrame(draw)
}

window.requestAnimationFrame(draw)
se añadieron 1607 caracteres en el cuerpo
Origen Enlace

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo):  

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []

function randomGraph() {
    return {
        x: Math.random() * 500,
        y: Math.random() * 500,
        w: 5 + Math.random() * 70,
        h: 5 + Math.random() * 70
    }
}

function middleX(g) {
    return g.x + (g.w / 2)
}

function middleY(g) {
    return g.y + (g.h / 2)
}

function draw() {
    ctx.clearRect(0, 0, 500, 500);

    let c = 2 + Math.trunc(Math.random() * 5)
    let columns = c

    grafos.length = 0
    for (let i = 0; i < c; i++) {
        grafos.push(randomGraph())
    }

    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0, 0, 500, 500);

    ctx.fillStyle = "#00FF00";

    for (let i = 0; i < grafos.length; i++) {
        ctx.strokeStyle = "#0000FF";
        ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.stroke();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#FF0000";

    for (let y = 0; y < columns; y++) {
        for (let x = 0; x < columns; x++) {
            let index = (y * columns + x) % grafos.length
            let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
            //console.log('index', index, index2)
            ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
            ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
            ctx.stroke()
        }
    }

    window.requestAnimationFrame(draw)
}

window.requestAnimationFrame(draw)

https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo):  https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo):

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let grafos = []

function randomGraph() {
    return {
        x: Math.random() * 500,
        y: Math.random() * 500,
        w: 5 + Math.random() * 70,
        h: 5 + Math.random() * 70
    }
}

function middleX(g) {
    return g.x + (g.w / 2)
}

function middleY(g) {
    return g.y + (g.h / 2)
}

function draw() {
    ctx.clearRect(0, 0, 500, 500);

    let c = 2 + Math.trunc(Math.random() * 5)
    let columns = c

    grafos.length = 0
    for (let i = 0; i < c; i++) {
        grafos.push(randomGraph())
    }

    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(0, 0, 500, 500);

    ctx.fillStyle = "#00FF00";

    for (let i = 0; i < grafos.length; i++) {
        ctx.strokeStyle = "#0000FF";
        ctx.fillRect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.rect(grafos[i].x, grafos[i].y, grafos[i].w, grafos[i].h);
        ctx.stroke();
    }

    ctx.lineWidth = 2;
    ctx.strokeStyle = "#FF0000";

    for (let y = 0; y < columns; y++) {
        for (let x = 0; x < columns; x++) {
            let index = (y * columns + x) % grafos.length
            let index2 = ((y + 1) * columns + (x + 1)) % grafos.length
            //console.log('index', index, index2)
            ctx.moveTo(middleX(grafos[index]), middleY(grafos[index]))
            ctx.lineTo(middleX(grafos[index2]), middleY(grafos[index2]))
            ctx.stroke()
        }
    }

    window.requestAnimationFrame(draw)
}

window.requestAnimationFrame(draw)

https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

se añadieron 102 caracteres en el cuerpo
Origen Enlace

Intento encontrar un (supuesto) memory leak, la animación se supone que muestre una serie de grafos en cada frame, pero lo que hace (al parecer) es no liberar el array de grafos y sigue dibujando todo cada vez que pasa un frame, haciendo la animación muy lenta.

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo): https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

Intente limpiar el array, ponerlo solo dentro de la función draw pero no pasa nada.

Edit: poniendo un log se ve que no es el array, el length se ve correcto. Es algo con el canvas...

Intento encontrar un (supuesto) memory leak, la animación se supone que muestre una serie de grafos en cada frame, pero lo que hace (al parecer) es no liberar el array de grafos y sigue dibujando todo cada vez que pasa un frame, haciendo la animación muy lenta.

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo): https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

Intente limpiar el array, ponerlo solo dentro de la función draw pero no pasa nada.

Intento encontrar un (supuesto) memory leak, la animación se supone que muestre una serie de grafos en cada frame, pero lo que hace (al parecer) es no liberar el array de grafos y sigue dibujando todo cada vez que pasa un frame, haciendo la animación muy lenta.

Código de ejemplo (abrir con cuidado ya que puede trabar el navegador con el tiempo): https://stackblitz.com/edit/web-platform-nex6wm?file=index.html

Intente limpiar el array, ponerlo solo dentro de la función draw pero no pasa nada.

Edit: poniendo un log se ve que no es el array, el length se ve correcto. Es algo con el canvas...

Origen Enlace
Loading