Leinwandelement
Das Leinwandelement ist ein Teil von HTML5 und ermöglicht dynamisch, skriptierbar Rendering von 2D -Formen und Bitmap Bilder. Es ist ein niedriges, prozedurales Modell, das a aktualisiert wird Bitmap. HTML5 -Leinwand hilft auch bei der Erstellung von 2D -Spielen.
Während die HTML5 -Leinwand eine eigene 2D -Zeichnung bietet APIes unterstützt auch die Webgl API, um 3D -Rendern mit OpenGL ES.
Geschichte
Leinwand wurde ursprünglich von eingeführt von Apfel für den Einsatz in ihren eigenen Mac OS X Webkit Komponente im Jahr 2004,[1] Antriebsanwendungen wie Armaturenbrett Widgets und die Safari Browser. Später, im Jahr 2005, wurde es in Version 1.8 von übernommen Gecko Browser,[2] und Oper in 2006,[3] und standardisiert durch die Web Hypertext Application Technology Arbeitsgruppe (Whatwg) über neue vorgeschlagene Spezifikationen für Webtechnologien der nächsten Generation.
Verwendungszweck
A Leinwand
besteht aus einer zeichnbaren Region, die in definiert ist Html Code mit Höhe und Breite Attribute. JavaScript Der Code kann über einen vollständigen Satz von Zeichnungsfunktionen zugreifen, die denen anderer gemeinsamer 2D -APIs ähneln, und ermöglicht so dynamisch generierte Grafiken. Einige erwartete Verwendungen von Leinwand umfassen das Erstellen von Grafiken, Animationen, Spielen und Bildkomposition.
Durch die Interaktion mit der Leinwand wird der Rendering -Kontext der Leinwand erhalten, der bestimmt, ob die A -Canvas -API, WebGL oder WebGL2 -Rendering -Kontext verwendet werden soll.
Beispiel
Der folgende Code erstellt in einer HTML -Seite ein Canvas -Element:
<Leinwand Ich würde="Beispiel" Breite="200" Höhe="200"> Dieser Text wird angezeigt, wenn Ihr Browser keine HTML5 -Leinwand unterstützt.Leinwand>
Verwendung JavaScriptSie können auf die Leinwand zeichnen:
var Beispiel = dokumentieren.GetElementById('Beispiel'); var Kontext = Beispiel.GetContext('2d'); Kontext.Fillstyle = 'rot'; Kontext.Fillrect(30, 30, 50, 50);
Dieser Code zeichnet ein rotes Rechteck auf dem Bildschirm.
Die Canvas -API bietet auch sparen()
und wiederherstellen()
zum Speichern und Wiederherstellen aller Attribute des Canvas -Kontextes.
Leinwandelementgröße im Vergleich zur Zeichnung der Oberflächengröße
Eine Leinwand hat tatsächlich zwei Größen: die Größe des Elements selbst und die Größe der Zeichenfläche des Elements. Das Festlegen der Breite und der Höhenattribute des Elements legt beide Größen fest. CSS -Attribute beeinflussen nur die Größe des Elements und nicht auf die Zeichenfläche.
Standardmäßig sind sowohl die Größe des Leinwandelements als auch die Größe seiner Zeichenoberfläche 300 Bildschirmpixel breit und 150 Bildschirmpixel hoch. In der im Beispiel angegebenen Auflistung, die verwendet wird CSS Um die Größe des Canvas -Elements festzulegen, beträgt die Größe des Elements 600 Pixel breit und 300 Pixel hoch, aber die Größe der Zeichenfläche bleibt beim Standardwert von 300 Pixel × 150 Pixel unverändert. Wenn die Größe eines Canvas -Elements nicht mit der Größe seiner Zeichenfläche übereinstimmt, skaliert der Browser die Zeichnungsoberfläche so, dass sie das Element entspricht (was zu überraschenden und unerwünschten Effekten führen kann).
Beispiel zum Festlegen der Elementgröße und zum Zeichnen der Oberflächengröße auf verschiedene Werte:
<html> <Kopf> <Titel>Leinwandelementgröße: 600 x 300, Leinwand Zeichnungsoberfläche: 300 x 150Titel> <Stil> Karosserie { Hintergrund: #dddddd; } #Leinwand { Rand: 20px; Polsterung: 20px; Hintergrund: #ffffff; Grenze: dünn Einsatz #aaaaaaa; Breite: 600px; Höhe: 300px; } Stil> Kopf> <Karosserie> <Leinwand Ich würde="Leinwand"> Leinwand nicht unterstützt Leinwand> Karosserie> html>
Leinwand gegen skalierbare Vektorgrafiken (SVG)
SVG ist ein früherer Standard zum Zeichnen von Formen in Browsern. Im Gegensatz zu Leinwand ist jedoch, was ist Raster-Basierend, SVG ist Vektor-basiert, so dass jede gezogene Form als Objekt in a in Erinnerung bleibt Szenengrafik oder Dokumentobjektmodell, was anschließend zu a gerendert wird Bitmap. Dies bedeutet, dass der Browser die Szene automatisch erneut rendern kann, wenn Attribute eines SVG-Objekts geändert werden.
Leinwandobjekte hingegen werden in gezogen Sofortiger Modus. Im obigen Canvas -Beispiel wird das Modell, aus dem das Rechteck gezogen wurde, vom System vergessen. Wenn seine Position geändert würde, müsste die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise vom Rechteck bedeckt waren. Im äquivalenten SVG -Fall könnte man jedoch einfach die Positionsattribute des Rechtecks ändern, und der Browser würde bestimmen, wie sie neu streichen sollen. Es gibt zusätzliche JavaScript -Bibliotheken Das fügt dem Canvas-Element Szenengragenfunktionen hinzu. Es ist auch möglich, eine Leinwand in Schichten zu malen und dann bestimmte Schichten neu zu erstellen.
SVG -Bilder werden in dargestellt Xmlund komplexe Szenen können mit XML -Bearbeitungswerkzeugen erstellt und gepflegt werden.
Das SVG -Szene -Diagramm ermöglicht Event -Handler mit Objekten assoziiert werden, damit ein Rechteck auf eine reagieren kann ONCLICK
Veranstaltung. Um die gleiche Funktionalität mit Leinwand zu erhalten, muss man die manuell mit dem übereinstimmen Koordinaten Klicken Sie mit den Koordinaten des gezogenen Rechtecks, um festzustellen, ob es angeklickt wurde.
Konzeptionell ist Canvas eine API auf niedrigerer Ebene, auf der ein Motor, der beispielsweise SVG unterstützt wird, gebaut werden kann. Es gibt JavaScript -Bibliotheken, die partielle SVG -Implementierungen mit Leinwand für Browser bereitstellen, die nicht SVG, sondern Leinwand unterstützen, z. B. die Browser in Android 2.x. Dies ist jedoch normalerweise nicht der Fall - sie sind unabhängige Standards. Die Situation ist kompliziert, da es Szenengrafikbibliotheken für Leinwand gibt und SVG eine Bitmap -Manipulationsfunktionalität hat.
Reaktionen
Zum Zeitpunkt seiner Einführung stieß das Canvas -Element mit gemischten Reaktionen der Web -Standards -Community. Es gab Argumente gegen Apples Entscheidung, ein neues proprietäres Element zu schaffen, anstatt das zu unterstützen SVG Standard. Es gibt andere Bedenken hinsichtlich der Syntax, wie das Fehlen von a Namespace.[4]
Geistiges Eigentum über Leinwand
Am 14. März 2007 Webkit -Entwickler Dave Hyatt leitete eine E -Mail von Apples Senior Patent Counsel, Helene Plotka Workman, weiter.[5] was erklärte, dass Apple alle reserviert hat geistiges Eigentum Rechte im Vergleich zu Whatwgs Webanwendungen 1.0 Arbeitsentwurf vom 24. März 2005, Abschnitt 10.1, mit dem Titel „Grafik: The Bitmap Canvas“,,[6] aber die Tür offen für die Lizenzierung der Patente, falls die Spezifikation in eine Standardkörper mit a übertragen werden sollte formelle Patentpolitik. Dies führte zu erheblichen Diskussionen unter den Webentwicklern und stellte Fragen zu dem Fehlen einer Richtlinie für Patente im Vergleich zur Patente durch. World Wide Web Konsortium (W3C) explizite Bevorzugung von Lizenzgebührenfreien Lizenzen. Apple gab später die Patente unter den lizenzfreien Patentlizenzbedingungen des W3C bekannt.[7] Die Offenlegung bedeutet, dass Apple erforderlich ist, um das Patent zu lizenzfreie Lizenzierung zu liefern, wenn das Canvas-Element Teil einer zukünftigen W3C-Empfehlung wird, die von der HTML-Arbeitsgruppe erstellt wurde.[8]
Datenschutzbedenken
Fingerabdruck von Leinwand ist eine von mehreren Anzahl von Browser -Fingerabdruck Techniken zur Verfolgung von Online -Benutzern, mit denen Websites Besucher identifizieren und verfolgen können HTML5 Leinwandelement. Die Technik erhielt 2014 eine breite Medienberichterstattung.[9][10][11][12] Nach Forschern von Princeton Universität und Ku Leuven Universität beschrieb es in ihrem Papier Das Web vergisst nie.[13] Die Datenschutzbedenken hinsichtlich des Fingerabdrucks von Leinwand in Bezug auf die Tatsache, dass selbst das Löschen von Cookies und das Löschen des Cache nicht ausreicht, um die Benutzer zu vermeiden, um Online -Tracking zu vermeiden.
Browserunterstützung
Das Element wird von den aktuellen Versionen von unterstützt Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Oper[14] und Microsoft Edge.[15]
Siehe auch
- Anti-Korn-Geometrie (Agg)
- Kairo (Grafik)
- Vergleich von Layout -Motoren (HTML5 -Leinwand)
- PostScript anzeigen
- Grafikgerätschnittstelle (GDI+)
- Quarz 2d
- Webgl
Verweise
- ^ Ian Hixie (2004-07-12). "HTML erweitern". Abgerufen 2011-06-13.
- ^ Mozilla -Entwicklerverbindung. "Htmlcanvaselement". Archiviert von das Original Am 2011-06-04. Abgerufen 2011-06-13.
- ^ "Opera 9.0 Changelog". Archiviert von das Original Am 2012-09-10. Abgerufen 2006-06-20.
- ^ Ian Hickson Bemerkungen zu Leinwand und anderen Apfelerweiterungen gegen HTML
- ^ "[Whatwg] Webanwendungen 1.0 Entwurf, David Hyatt, Mi 14. März 14:31:53 PDT 2007". Archiviert von das Original am 2007-05-02. Abgerufen 2007-05-01.
- ^ Webanwendungen 1.0 Early Working Draft - Dynamische Grafiken: Die Bitmap -Leinwand
- ^ HTML Arbeitsgruppenpatentpolitik Status - Bekannte Angaben
- ^ W3C -Patentrichtlinie, die von der HTML -Arbeitsgruppe verwendet werden
- ^ Knibbs, Kate (21. Juli 2014). "Was Sie über das hinterhältigste neue Online -Tracking -Tool wissen müssen". Gizmodo. Abgerufen 21. Juli, 2014.
- ^ Joseph Steinberg (23. Juli 2014). "Sie werden von einer hinterhältigen neuen Technologie online verfolgt - hier ist, was Sie wissen müssen.". Forbes. Abgerufen 15. November, 2014.
- ^ Angwin, Julia (21. Juli 2014). "Treffen Sie das Online -Tracking -Gerät, das praktisch unmöglich zu blockieren ist". ProPublica. Abgerufen 21. Juli, 2014.
- ^ Kirk, Jeremy (21. Juli 2014). "Stealthy Web Tracking -Tools stellen den Benutzern zunehmende Datenschutzrisiken dar". PC Welt. Abgerufen 21. Juli, 2014.
- ^ Acar, Schützen; Eubank, Christus; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (24. Juli 2014). "Das Web vergisst nie: Persistente Verfolgungsmechanismen in freier Wildbahn". Abgerufen 24. Juli, 2014.
- ^ Sucan, Mihai (4. Februar 2010). "Svg oder Leinwand?. Opera -Software. Archiviert von das Original am 23. Juni 2010. Abgerufen 3. Mai 2010.
- ^ "Leinwand, Microsoft Edge -Dokumentation".
Externe Links
- Das
Leinwand
Element, W3c, 2014-10-28, abgerufen 2015-01-09 - HTML Canvas 2D -Kontext, W3c, 2014-08-21, abgerufen 2015-01-09
- Canvas -Beschreibung in Whatwg Web Applications Entwurfspezifikationen
- Canvas -Referenzseite in Apple Developers Verbindung
- Basic Canvas -Tutorial zur Opernentwickler -Community
- Canvas -Tutorial und Einführungsseite zum Mozilla Developer Center Archiviert 2012-08-03 bei der Wayback -Maschine