Ich erstelle eine einfache Physik-Engine, die mit der Canvas-API arbeitet. Was ist die beste Praxis in Bezug auf die Leistung? Soll ein eigener Kontext für jedes Objekt in der Zeichenfläche erstellt werden (zB für jeden Ball, Box usw.) oder nur einen Kontext verwenden? Letzteres beinhaltet die Definition des Pfades im Kontext für jedes neu zu zeichnende Objekt sowie die Einstellung der Farbe usw. ..
Ist es eine schlechte Idee, mehrere Kontexte zu verwenden, wenn die Anzahl der Objekte in die Nähe von hundert kommt?
Der Grund, warum ich frage, ist, weil ich hundert Arbeitsstunden später keine Überraschung bekommen möchte, weil ich das falsch gemacht habe.
Leistungsgewinne bei mehreren Arbeitsbereichen ergeben sich aus dem Wissen, warum Sie mehrere Arbeitsflächen verwenden.
Verwenden Sie nicht mehrere Leinwände, es sei denn, sie dienen einem nützlichen Zweck:
Hier sind einige Gründe, mehr als 1 Leinwand zu verwenden:
Sie haben Zeichnungen, die zu unterschiedlichen Zeiten animiert werden.
Beispielsweise könnte ein Hintergrund alle 5 Frames animieren, während Ihre aktiveren Objekte jeden Frame animieren könnten. Wenn Sie den Hintergrund auf einer zweiten Leinwand haben, müssen Sie nicht für jeden Animationsrahmen den Hintergrund zeichnen.
Sie möchten den "doppelten Puffer" verwenden, um die Anzeigegeschwindigkeit zu erhöhen.
Zum Beispiel können Sie während der Anzeige des aktuellen Frames eine zweite Zeichenfläche zum Zusammenstellen eines komplexen Elements verwenden und dann displayContext.drawImage (bufferCanvas, 0,0) verwenden, um die Buffer-Zeichenfläche auf der Anzeigefläche zu zeichnen. Dadurch können Sie die "Ausfallzeit" zwischen Animationsframes nutzen, um Ihr nächstes Bild vorzubereiten.
Sie verwenden Leinwand, um Variationen für ein einzelnes Bild / drawnElement (Templating) zu erstellen.
Zum Beispiel, wenn Sie eine physische Barriere benötigen (sagen Sie ein Bild von einem grauen Gebäude). Sie können sich rote, blaue und grüne Gebäude für Abwechslung wünschen. Sie könnten das graue Gebäudebild auf einem Offscreen-Canvas haben und mit der globalCompositeOperation des Kontexts dieses Gebäude in rote, blaue und grüne Variationen einfärben. Auf diese Weise können Sie eine Bildressource auf mehrere Arten wiederverwenden.
Es gibt andere Gründe für mehrere Leinwände, aber es geht darum, mehrere Leinwände zu verwenden, um einen Bedarf zu decken.
Tags und Links javascript performance html5-canvas