Was sind die Vor- und Nachteile von Canvas vs. DOM bei der Entwicklung von JavaScript-Spielen?

Question

Was sind Vor- und Nachteile beim Erstellen von Spielen in "reinem" DOM ​​im Vergleich zur Verwendung von Canvas?

Answer 1

Mit Canvas können Sie Operationen ausführen, wie z. B. eine Rotation, die Sie mit reinem Dom nicht ausführen können, ohne einige "schwere" Tricks zu verwenden. Auf jeden Fall ist das Dom schneller und Sie können es in jedem Browser ohne Probleme verwenden. Sie müssen darüber nachdenken, was Sie in dem Spiel verwenden werden, wenn Sie nur grundlegende Operationen verwenden Sie das Dom, andernfalls wählen Sie die Leinwand.

Answer 2

Schauen Sie hier: Why Canvas is not an obvious choice for web games.

Answer 3

Wenn Sie mit Canvas entwickeln, müssen Sie die GameLoop-Technik verwenden, die sehr schmerzhaft ist, da Sie alle Elemente ständig neu zeichnen müssen.

Wenn Sie mit DOM entwickeln, können Sie nur die Objekte neu zeichnen, die geändert wurden und die harte Arbeit für die Browser-Implementierung ermöglichen.

Wenn Ihr Spiel ein paar Änderungen pro Frame hat, dann können Sie das DOM benutzen, ansonsten benutzen Sie bitte den Canvas! Es ist so viel schneller!

Answer 4

Leinwand Profis:

1. Pixel manipulieren könnte und Filtereffekt anwenden, so leicht für die Bildverarbeitung;
2. sehr effizient für kleine Größe, aber Hunderte von Elementen im Spiel
3. viele Bibliotheken für Spiel gefunden Leinwand verwenden könnten, wie box2dweb und könnten awesome Spiele wie böser Vogel

Nachteile machen:

1. es ist zustandslos, also müssen Sie die Zustände der Elemente in der Zeichenfläche aufzeichnen und den Treffertest selbst durchführen.
2. wenig effizient für sehr große Größe, aber mit ein paar Elementen im Spiel
3. große Fähigkeit, große Verantwortung. die Freiheit zu zeichnen, bringt ein, dass Sie alle ZeichnerInnen in Rechnung stellen müssen. Zum Glück gibt es dort viele Bibliotheken wie cocos2d-html5, IvanK.

DOM Profis:

1. Rendering durch den Browser, so dass weniger fehleranfällig;

Nachteile:

1. konnte nur mit CSS einfacher Animation tun, dass das Spiel nicht fließend macht;
2. nicht gut für die Manipulation von Hunderten von DOM-Elementen;