Jeder Performance-Trick, um Hunderte von Bildern auf einem HTML5-Canvas zu zeichnen?

Ich habe Hunderte von Bildern, die ich auf einer HTML5-Leinwand zeichnen muss, die in Echtzeit ankommen - und heute zeichne ich sie alle in einer for-Schleife mit der API drawImage.Jeder Performance-Trick, um Hunderte von Bildern auf einem HTML5-Canvas zu zeichnen?

Diese Bilder kommen in Gruppen, jede Gruppe enthält 100-200 Bilder. Alle Bilder aus derselben Gruppe sollten genau zur gleichen Zeit gezeichnet werden.

Gibt es eine API, die ich verwenden kann, um das Rendering zu "pausieren", alle Bilder zu zeichnen und dann das Rendering wieder "fortzusetzen"?

Ich sah auf der Leinwand HTML5 offizielle API, konnte aber nichts passendes finden.

Vielen Dank!

Amit

Edit: In ther Worten, ich bin nach einer Möglichkeit, die Leinwand/Browser, so etwas zu sagen: „Hey, ich werde ein paar Bilder zeichnen, nicht Ich werde es dir sagen, wenn ich fertig bin. "

Quelle

2016-08-01 Amit Kanfer

Ich bin mir nicht sicher, ob ich genau das erreiche, was du willst, aber du kannst auch die Leinwände außerhalb des Bildschirms verwenden, jede Gruppe auf eine Leinwand malen und dann nur die Leinwände auf die Leinwand zeichnen. – Kaiido

Es gibt zwei Ansätze, um die Geschwindigkeit zu optimieren. Mein Gedanke wäre, sie zu kombinieren: Sie können alles außerhalb des Bildschirms wiedergeben, was dazu führt, dass Sie das Rendering nicht sehen. Sie können dann mehrere transparente Canvas als Ebenen verwenden. Sie verschieben dann die Leinwand von der Leinwand auf die ursprüngliche Leinwand, wie Sie es mit jedem anderen DOM-Element tun können.

Schauen Sie sich here und here.

Quelle

2016-08-01 08:47:10 AgataB

Guter Plan! - Upvote. Übrigens, Sie müssen das neue Buffer-Canvas nicht zum DOM hinzufügen - Sie können es nur im Speicher behalten. So fügen Sie Ihrer Antwort Folgendes hinzu: 1. Erstellen Sie eine Arbeitsspeicher-Buffer-Arbeitsfläche mit 'var bufferCanvas = document.createElement ...'. 2. Laden Sie eine "Gruppe" von Bildern in einem Stapel. 3. Zeichnen Sie sie auf dem Pufferbereich. 4. Wenn alle Bilder der Gruppe gezeichnet sind, können Sie den Buffer-Canvas mit 'mainContext.drawImage (bufferCanvas, 0,0)' – markE

auf die sichtbare Leinwand zeichnen. Danke für Ihre Antwort. Ich werde versuchen, meine Frage klarer zu stellen ... Es ist nicht die Frage, welche Bilder während der Schleife sichtbar sein werden, da sie innerhalb von 0-30 ms beginnt und endet. Ich möchte diese Dauer auf ein Minimum reduzieren. Ich habe versucht, die gleichen Bilder auf einer Leinwand mit style.visibility versteckt zu zeichnen und es hat die Situation nicht verbessert. –

Jeder Performance-Trick, um Hunderte von Bildern auf einem HTML5-Canvas zu zeichnen?

Antwort

Verwandte Themen