From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/html/canvas/index.html | 120 ++++++++++++++++++++++++++++++++++++ 1 file changed, 120 insertions(+) create mode 100644 files/de/web/html/canvas/index.html (limited to 'files/de/web/html/canvas') diff --git a/files/de/web/html/canvas/index.html b/files/de/web/html/canvas/index.html new file mode 100644 index 0000000000..50e6da1aae --- /dev/null +++ b/files/de/web/html/canvas/index.html @@ -0,0 +1,120 @@ +--- +title: Canvas +slug: Web/HTML/Canvas +tags: + - API + - Canvas + - HTML5 +translation_of: Web/API/Canvas_API +--- +
{{CanvasSidebar}}
+ +

Mit der Einführung von HTML5 wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels JavaScript-API vorgestellt: {{HTMLElement("canvas")}}. Die Anwendungsgebiete sind äußerst flexibel, so ist es möglich, mit Canvas Diagramme zu zeichnen, Bilder zu bearbeiten, Animationen zu erstellen oder sogar Videos zu bearbeiten und zu rendern.

+ +

Der Support für <canvas> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab Firefox 1.5) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X Dashboard und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's Explorer Canvas Projekt auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <canvas> ebenfalls problemlos.

+ +

Das <canvas> Element wird zudem von WebGL für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.

+ +

Beispiel

+ +

Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.

+ +

HTML

+ +
<canvas id="canvas"></canvas>
+
+ +

JavaScript

+ +
var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+
+ctx.fillStyle = "green";
+ctx.fillRect(10, 10, 100, 100);
+
+ +

Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )

+ +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

Referenzen

+ +
+ +
+ +

Die Schnittstellen, die sich auf WebGLRenderingContext beziehen, werden unter WebGL zusammengefasst.

+ +

Leitfäden und Anleitungen

+ +
+
Canvas Tutorial
+
Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst
+
Code-Ausschnitte: Canvas
+
Einige Entwickler-orientierte Code-Ausschnitte, die <canvas> enthalten.
+
Demo: A basic ray-caster
+
A demo of ray-tracing animation using canvas.
+
DOM-Objekte in ein canvas zeichnen
+
Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.
+
Videos mit canvas manipulieren
+
{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.
+
+ +

Quellen

+ +

Allgemeines

+ + + +

Libraries

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf