HTML5 SVG 2d EINLEITUNG 13 - SVG -Duell -Leinwand, Vorteile und anwendbare Szenarioanalyse

Bisher wurden die Hauptmerkmale von SVG und Leinwand zusammengefasst. Sie sind alle 2D -Grafik -Display -Technologien, die in HTML5 unterstützt werden, und sie unterstützen alle Vektorgrafiken. Vergleichen wir nun diese beiden Technologien und analysieren wir ihre Stärken und anwendbaren Szenarien.

Analysieren wir zunächst die herausragenden Merkmale der beiden Technologien und schauen Sie uns die folgende Tabelle an:

Aus dem obigen Vergleich können wir erkennen, dass Leinwand einen starken Vorteil im Pixelbetrieb hat. Der größte Vorteil von SVG ist zwar die bequeme Interaktivität und Betriebsfähigkeit. Die Verwendung von Leinwand wird stark von der Größe der Leinwand (eigentlich die Anzahl der Pixel) beeinflusst, und die Verwendung von SVG wird durch die Anzahl der Objekte (Anzahl der Elemente) relativ stark beeinflusst. Leinwand und SVG sind in Bezug auf Änderungsmethoden immer noch unterschiedlich. Nach dem Zeichnen eines Canvas -Objekts kann es nicht mit Skripten und CSS geändert werden. SVG -Objekte sind Teil des Dokumentobjektmodells, daher können sie jederzeit mit Skripten und CSS geändert werden.

Tatsächlich ist Canvas ein pixelbasiertes Echtzeit-Muster-Grafiksystem. Nach dem Zeichnen des Objekts wird das Objekt nicht in Speicher gespeichert. Wenn dieses Objekt erneut benötigt wird, muss es neu gestaltet werden. SVG ist ein formbasiertes behaltenes Mustergrafiksystem. Nach dem Zeichnen des Objekts wird es im Speicher gespeichert. Wenn es die Informationen dieses Objekts ändern muss, kann es direkt geändert werden. Dieser grundlegende Unterschied hat zu Unterschieden in vielen Anwendungsszenarien geführt.

Wir können dies auch in den folgenden allgemeinen Anwendungen verstehen.

Dieser Aspekt ist leicht zu verstehen. Um Dokumente zu durchsuchen, die beim Skalieren nicht verzerrt sind oder hochwertige Dokumente drucken müssen, wird SVG normalerweise bevorzugt, z. B. Kartendienste.

SVG wird häufig für einfache Bilder verwendet, egal ob es sich um ein Bild in einer Anwendung oder einer Webseite, einem großen Bild oder einem kleinen Bild handelt. Da SVG in das DOM geladen oder vor dem Erstellen eines Bildes zumindest analysiert wird, sinkt die Leistung geringfügig, aber dieser Effizienzverlust ist im Vergleich zu den Kosten für die Rendern einer Webseite (etwa einige Millisekunden) extrem gering.

In Bezug auf die Dateigröße (zum Zweck der Bewertung des Netzwerkverkehrs) unterscheiden sich das SVG -Bild und die PNG -Bildgröße nicht viel. Da SVG jedoch als Bildformat skalierbar ist, ist die Verwendung von SVG eine ziemlich gute Wahl, wenn Entwickler das Bild in größerem Maßstab verwenden möchten oder wenn Benutzer Bildschirme mit hohem DPI verwenden.

Bei Verwendung von Leinwand erhalten Sie eine schnelle Zeichnungsgeschwindigkeit, ohne die entsprechenden Informationen des Elements beizubehalten. Insbesondere wenn Pixeloperationen verarbeitet werden müssen, ist die Leistung besser. Die Canvas -Technologie wird für diese Art der Anwendung im Grunde genommen verwendet.

Leinwand ist ideal für die nicht interaktive Echtzeitdatenvisualisierung. Zum Beispiel Echtzeitwetterdaten.

Sie können SVG oder Canvas verwenden, um verwandte Grafiken und Diagramme zu zeichnen. Wenn Sie jedoch die Betriebsfähigkeit hervorheben möchten, ist SVG zweifellos die beste Wahl. Wenn Sie keine Interaktivität benötigen und die Leistung hervorheben, ist Leinwand besser geeignet.

Da die meisten Spiele unter Verwendung von APIs auf niedriger Ebene entwickelt werden, ist Leinwand einfacher zu akzeptieren. Tatsächlich muss Leinwand beim Zeichnen der Spielszene die Form wiederholt zeichnen und positionieren, während SVG im Speicher gehalten wird, und das Ändern der verwandten Attribute ist sehr einfach, sodass SVG auch eine gute Wahl ist.

Es gibt kaum Unterschiede in der Leistung zwischen Leinwand und SVG beim Erstellen von Spielen mit mehreren Objekten auf einem Mini-Spiel-Board. Wenn jedoch mehr Objekte erstellt werden, wird der Canvas -Code jedoch viel größer. Da das Canvas-Objekt jedes Mal, wenn die Spielschleife durchgeführt wird, neu gezeichnet werden muss, verlangsamt sich das Leinwandspiel.

Aufgrund seiner guten Interaktivität ist SVG zweifellos besser. Mit der grafischen Anzeige von SVG können Sie alle Benutzeroberflächendetails in HTML-ähnlichen Tags im Körper erstellen. Da jedes SVG -Element und jedes untergeordnete Element auf separate Ereignisse reagieren können, können Sie komplexe Benutzeroberflächen sehr einfach erstellen. Bei Canvas müssen Sie angeben, wie Sie jeden Teil der Benutzeroberfläche in einer komplexeren Reihenfolge des Codes erstellen. Die Reihenfolge, die Sie folgen müssen, lautet:

• Holen Sie sich den Kontext.

• Zeichnen Sie.

• Geben Sie die Farbe jeder Zeile und jede Füllung an.

• Definieren Sie die Form.

• Komplette Zeichnung.

Darüber hinaus können Leinwand nur Ereignisse in der gesamten Leinwand bewältigen. Wenn es eine komplexere Benutzeroberfläche gibt, müssen Sie die Koordinaten des Ortes bestimmen, auf den Sie auf der Leinwand klicken. SVG kann Ereignisse für jedes untergeordnete Element einzeln verarbeiten.

Die folgenden zwei Beispiele veranschaulichen die jeweiligen technischen Vorteile von Leinwand und SVG:

Die Renderings sind wie folgt:

Nach dem Öffnen der Seite können Sie den Seitenquellcode anzeigen.

Diese Anwendung soll Pixel aus zwei Videos in ein anderes Video lesen und schreiben. Der Code verwendet zwei Videos, zwei Leinwände und eine endgültige Leinwand. Erfassen Sie jeweils einen Frame für das Video und zeichnen Sie auf zwei separate Leinwände, sodass Daten zurückgelesen werden können:

ctxSource1.Drawimage (Video1, 0, 0, Videowidth, VideoHeight);

ctxSource2.drawimage (Video2, 0, 0, Videowidth, VideoHeight);

Der nächste Schritt besteht also darin, die Daten für jedes gezogene Bild abzurufen, damit jedes einzelne Pixel überprüft werden kann:

CurrentFrameSource1 = ctxSource1.getImagedata (0, 0, Videowidth, VideoHeight);

CurrentFrameSource2 = ctxSource2.getImagedata (0, 0, Videowidth, VideoHeight);

Nach dem Erhalten stöbert der Code das Pixelarray des grünen Bildschirms und sucht nach den grünen Pixeln. Wenn der Code gefunden wird, ersetzt der Code alle grünen Pixel durch die Pixel in der Hintergrundszene. :

für (var i = 0; i <n; i ++)

{

// Schnapp dir die RBG für jedes Pixel:

r = currentFrameSource1.data [i * 4 + 0];

g = CurrentFrameSource1.data [i * 4 + 1];

B = CurrentFrameSource1.Data [i * 4 + 2];

// Wenn dies ein grünes Pixel ersetzt, ersetzen Sie es:

if ((r> = 0 && r <= 59) && (g> = 74 && g <= 144) && (b> = 0 && b <= 56)) // Target Green IS (24, 109, 21), also schauen Sie sich diese Werte um.

{

pixelindex = i * 4;

currentFrameSource1.data [pixelIndex] = currentFrameSource2.data [pixelIndex];

CurrentFrameSource1.Data [PixelIndex + 1] = CurrentFrameSource2.data [PixelIndex + 1];

CurrentFrameSource1.Data [PixelIndex + 2] = CurrentFrameSource2.Data [PixelIndex + 2];

CurrentFrameSource1.Data [PixelIndex + 3] = CurrentFrameSource2.Data [PixelIndex + 3];

}

}

Schließlich wird das Pixel -Array in die Ziel -Leinwand geschrieben:

ctxDest.putImagedata (CurrentFrameSource1, 0, 0);

<! DocType html>

<html>

<kopf>

<script type = "text/javaScript">

// Diese Funktion wird aufgerufen, wenn der Kreis geklickt wird.

Funktion ClickMe () {

// Zeigen Sie die Warnung an.

ALERT ("Sie haben auf das SVG UI -Element geklickt.");

}

</script>

</head>

<body>

<h1>

SVG -Benutzeroberfläche

</h1>

<!- ​​Erstellen Sie den SVG-Bereich. ->

<Svg>

<!- ​​Erstellen Sie den Kreis. ->

<Kreis cx = "100" cy = "100" r = "50" fill = "gold" id = "uielement" onclick = "clickme ();"

/>

</svg>

<p>

Klicken Sie auf das Element der Gold Circular User Interface.

</p>

</body>

</html>

Obwohl dieses Beispiel einfach ist, hat es alle Eigenschaften der Benutzeroberfläche. Aus diesem Beispiel schätzen wir erneut die bequeme interaktive Natur von SVG.

Verwenden Sie schließlich ein Bild, um die für jede Anwendung geeigneten Technologien zusammenzufassen. Jeder Block in der Abbildung stellt eine Art von Anwendung dar. Je näher es zu Ende ist, desto mehr Vorteile müssen es diese Technologie nutzen:

Skriptindex: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Entwicklungszentrum: https://developer.mozilla.org/en/svg

Beliebte Referenz: http://www.chinasvg.com/

Offizielles Dokument: http://www.w3.org/tr/svg11/