1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
---
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>
|
