Prerender auf Leinwand 2D

Bei Versuchen, die in Leinwand erstellte 2D-Animation zu optimieren, wurde eine interessante Option gefunden.

Vorläufige Visualisierung - Prerender.

"Und wenn Sie alle Bilder im Voraus aufnehmen und nach dem Ende der Animation anzeigen?" - Wir haben mit einem Freund nachgedacht und das ist am nächsten Tag passiert.

Live-Demo

amedomary.ru/prerender-canvas

Code v1.0

Die Seite selbst ist auf Github .

Die Logik ist sehr einfach und wird in 2 Schritten implementiert:

Schritt 1 - Speichern Sie jeden Frame unserer Animation in einer Reihe von Bildern

  function renderLoop() {
    draw();

    // create prerender images
    canvasPrerender.toBlob(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      reader.onload = function() {
        const image = document.createElement("img");
        image.src = reader.result;
        prerenderArr.push(image);
      };
    });

    if (prerenderIsCompleted) {
      requestAnimationFrame(renderLoop);
    } else {
      requestAnimationFrame(drawPreImg);
    }
  }

2 — —

  function drawPreImg() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(prerenderArr[i], 0, 0);

    requestAnimationFrame(drawPreImg);
  }

Analytic

. macbook 13 2019 .

.

FPS

Fps "" .

Fps "" (prerender): 14-22
Fps "" ( ): 58-60

, live demo.

Prerender — 9
— 3
— 12 ( live demo)

CPU / Performance

Wie aus dem folgenden Screenshot ersichtlich, leidet unser Prozessor nur im Vorrenderstadium. Das Zeichnen von vorgefertigten Bildern ist nicht schwierig.

Erinnerung

Für eine kleine Animation wie unsere dauert das Ganze:
~ 432/2 = 200 Frames
~ 25 MB

Fazit

Wenn Sie die Möglichkeit haben, zu warten, bevor Sie die Animation dem Benutzer zeigen, und sie nicht Gigabyte Speicherplatz verbraucht, versuchen Sie, so etwas zu tun.

PS

Wenn Sie Ideen zur Verbesserung der Leistung dieses Ansatzes haben, schreiben Sie :)