diff options
Diffstat (limited to 'files/de/web/html/canvas/index.html')
| -rw-r--r-- | files/de/web/html/canvas/index.html | 120 |
1 files changed, 0 insertions, 120 deletions
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 ---- -<div>{{CanvasSidebar}}</div> - -<p class="summary">Mit der Einführung von <a href="/en-US/docs/HTML/HTML5">HTML5 </a>wurde ein neues "Leinwand" Element zum Zeichnen von Grafiken mittels <a href="/en-US/docs/Web/JavaScript">JavaScript</a>-API vorgestellt: <strong>{{HTMLElement("canvas")}}</strong>. 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.</p> - -<p>Der Support für <code><canvas></code> in Mozilla-Anwendungen wurde ab Gecko 1.8 (sprich ab <a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>) implementiert. Canvas stammt ursprünglich von Apple und wurde für das OS X <a href="https://en.wikipedia.org/wiki/Dashboard_%28Mac_OS%29">Dashboard </a>und den Safari-browser entwickelt. Der Internet Explorer unterstützt Canvas ab Version 9, wobei es durch ein Skript von Google's <a href="http://excanvas.sourceforge.net/">Explorer Canvas Projekt</a> auch in früheren Versionen des IE lauffähig ist. Google Chrome und Opera ab Version 9 unterstützen <code><canvas></code> ebenfalls problemlos.</p> - -<p>Das <code><canvas></code> Element wird zudem von <a href="/en-US/docs/Web/WebGL">WebGL </a>für die hardwarebeschleunigte Darstellung von 3D-Grafiken auf Webseiten eingesetzt.</p> - -<h2 id="Beispiel">Beispiel</h2> - -<p>Dies ist ein einfacher Code-Ausschnitt mit der {{domxref("CanvasRenderingContext2D.fillRect()")}} Methode.</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>canvas</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>canvas<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>canvas</span><span class="punctuation token">></span></span></code> -</pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); - -ctx.fillStyle = "green"; -ctx.fillRect(10, 10, 100, 100); -</pre> - -<p>Bearbeite den untenstehenden Code und sieh live Updates im Canvas: (Funktion kaputt auf Deutsch, die Englische Seite funktioniert, bitte oben umschalten auf Englisch )</p> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Referenzen">Referenzen</h2> - -<div class="index"> -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> - <li>{{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> - <li>{{domxref("ImageBitmap")}}</li> - <li>{{domxref("ImageData")}}</li> - <li>{{domxref("TextMetrics")}}</li> - <li>{{domxref("Path2D")}} {{experimental_inline}}</li> -</ul> -</div> - -<p>Die Schnittstellen, die sich auf <code>WebGLRenderingContext</code> beziehen, werden unter <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> zusammengefasst.</p> - -<h2 id="Leitfäden_und_Anleitungen">Leitfäden und Anleitungen</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas Tutorial</a></dt> - <dd>Eine ausführliche Anleitung, die sowohl grundlegende Nutzung als auch fortgeschrittene Funktionen umfasst</dd> - <dt><a href="/en-US/Add-ons/Code_snippets/Canvas">Code-Ausschnitte: Canvas</a></dt> - <dd>Einige Entwickler-orientierte Code-Ausschnitte, die <code><canvas></code> enthalten.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: A basic ray-caster</a></dt> - <dd>A demo of ray-tracing animation using canvas.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">DOM-Objekte in ein canvas zeichnen</a></dt> - <dd>Wie man DOM Inhalt, wie zum Beispiel HTML-Elemente, in ein canvas zeichnet.</dd> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Videos mit canvas manipulieren</a></dt> - <dd>{{HTMLElement("video")}} und {{HTMLElement("canvas")}} kombinieren, um Videos in Echtzeit zu manipulieren.</dd> -</dl> - -<h2 id="Quellen">Quellen</h2> - -<h3 id="Allgemeines">Allgemeines</h3> - -<ul> - <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">HTML5 Canvas Deep Dive</a></li> - <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Canvas Handbook</a></li> -</ul> - -<h3 id="Libraries">Libraries</h3> - -<ul> - <li><a href="http://fabricjs.com">Fabric.js</a> is an open-source canvas library with SVG parsing capabilities.</li> - <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> is an open-source canvas library focused on interactivity for desktop and mobile applications.</li> - <li><a href="http://paperjs.org/">Paper.js</a> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.</li> - <li><a href="http://libcanvas.github.com/">libCanvas</a> is powerful and lightweight canvas framework.</li> - <li><a href="http://processingjs.org">Processing.js</a> is a port of the Processing visualization language.</li> - <li><a href="https://playcanvas.com/">PlayCanvas</a> is an open source game engine.</li> - <li><a href="http://www.pixijs.com/">Pixi.js</a> is an open source game engine.</li> - <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> is a charting and graphing library.</li> - <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> is an animation key-framing API for Canvas.</li> - <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> is a WebGL framework for data visualization, creative coding and game development.</li> - <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> creates interactive 2D Canvas data visualizations for the Web.</li> -</ul> - -<h2 id="Spezifikationen">Spezifikationen</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spezifikation</th> - <th scope="col">Status</th> - <th scope="col">Kommentar</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "the-canvas-element.html", "Canvas")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> -</ul> |