Echtzeitmodus und Retentionsmodus

Es ist entscheidend, zwischen dem Echtzeitmodus und dem Retentionsmodus zu unterscheiden. HTML5 -Leinwand ist ein Beispiel für erstere und SVG ist ein Beispiel für das letztere.

Echtzeitmodus bedeutet, dass die Leinwand nach der Verfolgung der Leinwand nach dem Verfolgen der Leinwand. Mit anderen Worten, als Entwickler müssen Sie Befehle formulieren, um Objekte zu zeichnen, das Modell oder das Szenario der endgültigen Ausgabe zu erstellen und zu verwalten und anzugeben, was aktualisiert werden muss. Die Grafik -API des Browsers übermittelt einfach Ihre Zeichnungsbefehle dem Browser, und der Browser führt diese Befehle aus.

SVG verwendet den Retentionsmodus.

Als sofortiges Grafiksystem verfügt Canvas über kein DOM- oder Dokumentobjektmodell. Mit Leinwand zeichnen Sie Pixel und das System vergisst alle und reduziert den zus?tzlichen Speicher, der erforderlich ist, um das interne Modell der Zeichnung aufrechtzuerhalten. Bei SVG wird jedes von Ihnen gezogene Objekt zum internen Modell des Browsers hinzugefügt, was Ihr Leben als Entwickler ein wenig einfacher macht, aber bei der Leistung einen Preis zahlt.

basierend auf dem Unterschied zwischen dem Echtzeitmodus und dem Aufbewahrungsmodus sowie anderen spezifischen Merkmalen von Leinwand und SVG k?nnen einige Situationen, in denen die Verwendung einer Technologie anstelle einer anderen die Ziele des Projekts besser dient.

HTML5 -Leinwand: Pros and Cons

-Element nicht verwenden sollten, wenn andere geeignete Methoden verfügbar sind. <canvas></canvas>

(übrigens ist SVG auch nicht). Diese Ansicht wurde von Dr. Abstract, dem Sch?pfer und Gründer von Zim JS Canvas Framework, best?tigt, der schrieb: <canvas></canvas>

DOM- und DOM -Frameworks sind gut darin, Informationen anzuzeigen, insbesondere Textinformationen. Im Gegensatz dazu ist die Leinwand ein Bild. Der Text kann zu der Leinwand hinzugefügt werden und es reagieren lassen, aber der Text kann jedoch nicht so einfach ausgew?hlt oder gesucht werden wie auf dem DOM. Lange Scroll -Textseiten oder Text- und Bildseiten sind eine hervorragende Verwendung für DOM. DOM eignet sich perfekt für Social -Media -Websites, Foren, Eink?ufe und alle Informations -Apps, an die wir verwendet werden. —— "Wann zu JavaScript Canvas Library oder Framework"

verwendet werden

verwendet wird. Aber wann ist <canvas></canvas> eine gute Wahl? <canvas></canvas>

Was kann Canvas gut sind?

Der Overhead of Dom -Rendering ist trotzdem offensichtlicher, wenn es sich um Hunderte oder sogar Tausende von Objekten handelt. Weder die Leinwand noch die SVG werden jedoch von der Objektgr??e beeinflusst. Angesichts der endgültigen Statistiken bietet die Leinwand einen klaren Vorteil in Bezug auf die Leistung.

Strahlenverfolgung Strahlenverfolgung ist eine Technik zum Erstellen von 3D -Grafiken.

Strahlenverfolgung kann verwendet werden, um ein Bild zu füllen, indem die Strahlpfade der Pixel in der Bildebene verfolgt und seine Begegnung mit einem virtuellen Objekt simulieren ... die Effekte, die durch Strahlenverfolgung erzielt werden ... reichen von ... Realistic erstellen Bilder aus einfachen Vektorgrafiken tragen einen photo?hnlichen Filter an, um rote Augen zu entfernen. ——Svg und Canvas: W?hlen Sie, Microsoft -Dokumente.

W?hrend HTML5 -Leinwand sicherlich besser für diese Aufgabe als SVG geeignet ist, bedeutet dies nicht unbedingt, dass die Ray -Verfolgung am

Zeichnen Sie eine gro?e Anzahl von Objekten auf kleinen Oberfl?chen

Ein weiteres Beispiel ist eine Szene, in der eine Anwendung eine gro?e Anzahl von Objekten auf einer relativ kleinen Oberfl?che zeichnen muss-z. B. nicht interaktive Echtzeitdatenvisualisierungen, wie z. B. grafische Darstellungen von Wettermustern.

Pixelersatz in Video

Wie in diesem HTML5 -Arztartikel gezeigt, besteht ein weiteres Beispiel für die Verwendung von Leinwand darin, die Video -Hintergrundfarbe durch eine andere Farbe, eine andere Szene oder ein Bild zu ersetzen.

Was ist HTML5 -Leinwand nicht gut?

hingegen ist in vielen F?llen Leinwand im Vergleich zu SVG m?glicherweise nicht die beste Wahl.

Skalierbarkeit

Die meisten Szenarien, in denen Skalierbarkeit ein Vorteil ist, nutzen SVG anstelle von Leinwand besser. High -Treue, komplexe Grafiken wie Architektur- und Ingenieurzeichnungen, organisatorische Zeichnungen, biologische Zeichnungen usw. sind Beispiele für diese Situation.

Wenn Sie mit SVG zeichnen, das Bild vergr??ern oder das Bild drucken, wird alle Details beibehalten, um ein sehr hohes Qualit?tsniveau zu erzielen. Sie k?nnen diese Dokumente auch aus der Datenbank generieren, wodurch das XML -Format von SVG für diese Aufgabe perfekt ist.

Zus?tzlich sind diese Grafiken normalerweise interaktiv. Wenn Sie beispielsweise Ihre Tickets online buchen, sollten Sie die Sitzkarte in Betracht ziehen, was es zu einem hervorragenden Anwendungsfall für erhaltene Grafiksysteme wie SVG macht.

Elemente zu verwenden, um JavaScript zu verwenden. Stattdessen k?nnen Sie SVG-Grafiken unter Verwendung von Standard-Vektor-Bearbeitungsprogrammen wie Adobe Illustrator oder Inkscape zeichnen und reine CSS verwenden, um sein Aussehen zu steuern und überzeugende, subtile Animationen und Mikrointeraktionen durchzuführen. <canvas></canvas>

Kombinieren Sie HTML5 -Leinwand und SVG für erweiterte Szenarien

In einigen F?llen kann Ihre Bewerbung das Beste aus beiden Welten erhalten, indem Sie HTML5 -Leinwand und SVG kombinieren. Beispielsweise k?nnen Canvas-basierte Spiele SVG-Bilder verwenden, die von Vektorbearbeitungsprogrammen als Sprites generiert werden, um ihre Skalierbarkeit und eine kleinere Download-Gr??e im Vergleich zu PNG-Bildern zu nutzen. Alternativ kann ein Zeichnungsprogramm seine Benutzeroberfl?che mit SVG und <canvas></canvas> -Elementen zum Zeichnen einstellen.

Schlie?lich k?nnen Sie mit einer leistungsstarken Bibliothek wie Paper.js Vektorgrafikskripte über die HTML5 -Leinwand schreiben, um den Entwicklern eine bequeme M?glichkeit zu geben, beide Technologien gleichzeitig zu verwenden.

Schlussfolgerung

In diesem Artikel untersuche ich einige der wichtigsten Funktionen von HTML5 -Leinwand und SVG, damit Sie feststellen k?nnen, welche Technologie für eine bestimmte Aufgabe am besten geeignet ist.

Was ist die Antwort?

Chris Coyier stimmt mit Benjamin de Cock überein, der getwittert hat:

Eine ?u?erst grundlegende M?glichkeit, diese Frage zu beantworten, besteht darin, "Leinwand zu verwenden, wenn Sie SVG nicht verwenden k?nnen" (wobei "nicht" bedeuten kann, Tausende von Objekten zu beleben, jedes Pixel einzeln zu manipulieren usw.). Mit anderen Worten, SVG sollte Ihre Standardauswahl sein und Canvas ist Ihr Sicherungsplan.

- Benjamin de Cock (@BDC) 2. Oktober 2019

Dr. Abstract bietet eine Liste vieler der besten Dinge, die Sie mit Leinwand erstellen k?nnen, einschlie?lich interaktiver Logos und Werbung, interaktiver Infografiken, E-Learning-Anwendungen und vielem mehr.

Meiner Meinung nach gibt es keine harten und schnellen Regeln darüber, wann es am besten ist, Leinwand anstelle von SVG zu verwenden. Der Unterschied zwischen dem Echtzeitmodus und dem Retentionsmodus zeigt, dass HTML5-Leinwand der unbestrittene Gewinner ist, wenn es darum geht, grafisch intensive Spiele zu erstellen, und SVG für flache Bilder, Ikonen, UI-Elemente usw. vorzuziehen ist. Dazwischen verfügt HTML5 -Leinwand jedoch auch Raum, um den Anwendungsbereich zu erweitern, insbesondere wenn man bedenkt, was eine Vielzahl leistungsstarker Leinwandbibliotheken bieten kann. Sie erleichtern nicht nur die Verwendung beider Technologien gleichzeitig in derselben grafischen Arbeit, sondern machen auch einige schwierige Funktionen in nativen Canvas -Projekten (z. Dies ?ffnet die Tür zu interessanteren Verwendungen von HTML5 -Leinwand, die von den meisten Entwicklern verwendet werden.

FAQs für Leinwand gegen SVG