HTML5 Canvas vs. SVG vs. div

Question

Wie lassen sich Elemente am besten im laufenden Betrieb erstellen und verschieben? Nehmen wir an, ich möchte ein Rechteck, einen Kreis und ein Polygon erstellen und dann diese Objekte auswählen und verschieben.

Soweit ich weiß, bietet HTML5 drei Elemente, die dies möglich machen können: svg , Leinwand y div . Welches dieser Elemente bietet die beste Leistung für das, was ich tun möchte?

Um diese Ansätze zu vergleichen, dachte ich an die Erstellung von drei visuell identischen Webseiten, die jeweils eine Kopfzeile, eine Fußzeile, ein Widget und einen Textinhalt enthalten. Das Widget auf der ersten Seite würde vollständig mit dem canvas Element, das zweite vollständig mit dem svg Element, und das dritte mit dem einfachen div Element, HTML und CSS.

Answer 1

Nur meine 2 Cents bezüglich der Option divs.

Famous/Infamous und SamsaraJS (und möglicherweise auch andere) verwenden absolut positionierte, nicht verschachtelte Divs (mit nicht-trivialen HTML/CSS-Inhalten), kombiniert mit matrix2d/matrix3d für die Positionierung und 2D/3D-Transformationen, und erreichen stabile 60FPS auf moderater mobiler Hardware, also würde ich dagegen argumentieren, dass Divs eine langsame Option sind.

Auf Youtube und anderswo gibt es zahlreiche Bildschirmaufnahmen von hochleistungsfähigem 2D/3D-Zeug, das im Browser läuft, wobei alles ein DOM-Element ist, das Sie Element inspizieren an, bei 60FPS (gemischt mit WebGL für bestimmte Effekte, aber nicht für den Hauptteil des Renderings).

Answer 2

Für Ihre Zwecke empfehle ich SVG, da Sie DOM-Ereignisse, wie z. B. Mausbehandlung, einschließlich Drag & Drop, mit einbeziehen, Sie müssen kein eigenes Redraw implementieren und Sie müssen den Zustand Ihrer Objekte nicht verfolgen. Verwenden Sie Canvas, wenn Sie Bitmap-Bilder manipulieren müssen, und ein normales Div, wenn Sie in HTML erstellte Objekte manipulieren wollen. Was die Leistung angeht, so werden Sie feststellen, dass moderne Browser inzwischen alle drei beschleunigen, aber dass Canvas bisher die meiste Aufmerksamkeit erhalten hat. Andererseits ist es für die Leistung von Canvas entscheidend, wie gut Sie Ihr Javascript schreiben, daher würde ich immer noch die Verwendung von SVG empfehlen.

Answer 3

Sie alle haben gute und schlechte Seiten, die wir im Folgenden vergleichen.

Canvas bietet die beste Gesamtleistung, aber nur, wenn Sie es richtig einsetzen.

Divs:

1. • Gute Leistung
2. • Sie können es mit dem DOM manipulieren
3. • Sie haben Zugriff auf DOM Events
4. • CSS-Unterstützung
5. • Es ist schwierig, komplexe Formen zu erstellen

Leistungstest hier: https://kajam.hg0428.repl.co/pref/

Segeltuch:

1. • Bessere Unterstützung der Form
2. • Großartige Leistung
3. • Großartige Browser-Unterstützung
4. • Kein CSS

Leistungstest hier: https://js-game-engine.hg0428.repl.co/canvasTest/preform.html

SVGs:

1. • Bessere Unterstützung der Form
2. • Schwerer zu benutzen
3. • Gute Browser-Unterstützung
4. • Kein CSS, aber viele verschiedene SVG-Sachen
5. • Schlechte Leistung

Ich habe noch keinen Leistungstest für dieses Gerät gemacht, aber basierend auf anderen Tests, ist es nicht gut.

Um Canvas schnell zu machen:

Eine Leinwand kann eine sehr dynamische Leistung haben, daher einige Tipps. Vermeiden Sie die Verwendung ctx.rect y ctx.fill verwenden ctx.fillRect stattdessen, und das ist das größte Problem, kann es selbst die einfachsten Spiele ruinieren. Anstatt die Formen mit ihren fill y stroke verwenden fill[Shape] stattdessen.

Wenn Sie das bei der Verwendung von Canvas nicht beachten, werden Ihre Spiele sehr langsam sein. Ich habe das aus Erfahrung gelernt.

Answer 4

Beim Googeln finde ich eine gute Erklärung über die Verwendung und Komprimierung von SVG y Segeltuch unter http://teropa.info/blog/2016/12/12/graphics-in-angular-2.html

Ich hoffe, es hilft:

• SVG, wie HTML, verwendet beibehaltene Darstellung : Wenn wir ein Rechteck Rechteck auf dem Bildschirm zeichnen wollen, verwenden wir deklarativ ein Element in unserem DOM. Der Browser zeichnet dann ein Rechteck, aber er erstellt auch ein In-Memory SVGRectElement Objekt, das das Rechteck darstellt. Dieses Objekt ist etwas, das wir weiterhin bearbeiten können - es wird beibehalten. Wir können ihm im Laufe der Zeit verschiedene Positionen und Größen zuweisen. Wir können auch Ereignis-Listener anhängen, um es interaktiv zu machen.
• Verwendungen der Leinwand sofortige Wiedergabe : Wenn wir ein Rechteck zeichnen wird vom Browser sofort ein Rechteck auf dem Bildschirm dargestellt, aber es gibt aber es wird nie ein "Rechteck-Objekt" geben, das es repräsentiert. Es gibt nur eine Reihe von Pixeln im Canvas-Puffer. Wir können das Rechteck nicht bewegen. Wir können nur ein anderes Rechteck zeichnen. Wir können nicht reagieren auf Klicks oder andere Ereignisse auf das Rechteck reagieren. Wir können nur auf Ereignisse reagieren auf das ganze Leinwand .

Canvas ist also eine niedrigere, restriktivere API als SVG. Aber es gibt eine Kehrseite der Medaille ist, dass man mit Canvas mehr mit der gleichen gleichen Menge an Ressourcen. Denn der Browser muss die In-Memory-Daten nicht erstellen den speicherinternen Objektgraphen all der Dinge, die wir gezeichnet haben, erstellen und pflegen muss zeichnen muss, benötigt er weniger Speicher- und Rechenressourcen, um die gleiche visuelle Szene zu zeichnen. Wenn Sie eine sehr große und komplexe Visualisierung zu zeichnen haben zeichnen müssen, könnte Canvas die richtige Wahl sein.