Welche Zeichenmethoden gibt es in HTML5?

Zeichenmethode in HTML5: 1. Verwenden Sie Canvas, das auf Pixeln basiert, 2D-Zeichenfunktionen bereitstellt, auf HTML basiert und Muster über Skripte zeichnet. 2. Verwenden Sie SVG-Vektorgrafiken, die eine Reihe von grafischen Elementen bereitstellen, die für geeignet sind statische Bildanzeige, Anwendungsszenarien für die sichere Anzeige und den Druck von Dokumenten.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Es gibt zwei Zeichenmethoden in HTML5: Canvas und SVG.

Canvas und SVG sind beide empfohlene und wichtigste 2D-Grafikzeichnungstechnologien in HTML5

Was ist Canvas?

• <canvas> ist eine neue Komponente von H5, wie ein Vorhang, ein HTML-Element, in dem Sie Skripte (normalerweise Javascript) zum Zeichnen von Grafiken verwenden können. Es kann zum Erstellen verschiedener Diagramme, Tabellen oder einiger Animationen verwendet werden. <canvas>是H5新增的组件，就像一块幕布，可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画。
• Canvas 技术比较新，注重栅格图像处理。

什么是SVG？

• SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年，
• 基于可扩展标记语言XML 出来的

区别：

• Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案；

• SVG为矢量图，提供一系列图形元素（Rect，Path，Circle，Line...）

  Canvas-Technologie ist relativ neu und konzentriert sich auf die Verarbeitung von Rasterbildern.

• Was ist SVG?

• SVG ist eine unabhängige Vektorgrafiksprache, die seit mehr als zehn Jahren ein W3C-Standard ist.
  basiert auf der erweiterbaren Auszeichnungssprache XML Funktionen. Es handelt sich um eine Art HTML-Element, das auf HTML basiert und Muster nur über Skripte zeichnen kann.

SVG ist ein Vektorbild und bietet eine Reihe grafischer Elemente (Rechteck, Pfad, Kreis, Linie). .);Es gibt auch einen vollständigen Animations- und Zeitmechanismus, der unabhängig verwendet oder in HTML eingebettet werden kann.

Canvas wird Pixel für Pixel gerendert. Sobald die Grafik gezeichnet ist, wird sie vom Browser nicht mehr beachtet.

• SVG wird durch DOM-Manipulation angezeigt.

• Funktionsvergleich:

• Canvas bietet mehr Originalfunktionen, dynamisches Rendering und das Zeichnen großer Datenmengen.

• Auflösungsabhängig. Unterstützt keine Event-Handler. Kann vas ist Pixel- nach Pixel Beim Rendern wird die Grafik nach dem Zeichnen vom Browser nicht mehr beachtet, sodass die Textwiedergabefähigkeit schwach ist

• Das Ergebnisbild kann im .png- oder .jpg-Format gespeichert werden

• Canvas eignet sich am besten für viele Objekte, die häufig neu gezeichnet werden sollen. Grafikintensive Spiele.

Geeignet für kleine Bereiche, große Anzahl von Szenen. garantierte Anwendungsszenarien zum Anzeigen und Drucken von Dokumenten;

• Nicht abhängig von der Auflösung

• Unterstützt Ereignishandler

• SVG wird durch DOM-Manipulation angezeigt und eignet sich am besten für Anwendungen mit großen Renderingbereichen (z. B. Google Maps).

• Hohe Komplexität Verlangsamen Sie die Rendering-Geschwindigkeit (jede Anwendung, die übermäßig DOM verwendet, ist nicht schnell)

• SVG verlangsamt die Rendering-Geschwindigkeit in komplexen Spielanwendungen aufgrund von DOM-Vorgängen. Es ist nicht für Spieleanwendungen geeignet

Geeignet für große Flächen und kleine Flächen. Anzahl der Szenen. Es wird dringend empfohlen, SVG beim Rendern auf mobilen Plattformen Vorrang einzuräumen.
Verwandte Empfehlungen: „

HTML-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonWelche Zeichenmethoden gibt es in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!