From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- files/de/web/html/canvas/index.html | 120 ------------------------------------ 1 file changed, 120 deletions(-) delete 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 deleted file mode 100644 index 50e6da1aae..0000000000 --- a/files/de/web/html/canvas/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -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