diff options
Diffstat (limited to 'files/de/web/api')
41 files changed, 4362 insertions, 125 deletions
diff --git a/files/de/web/api/audiocontext/decodeaudiodata/index.html b/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html index 32cfda28eb..32cfda28eb 100644 --- a/files/de/web/api/audiocontext/decodeaudiodata/index.html +++ b/files/de/web/api/baseaudiocontext/decodeaudiodata/index.html diff --git a/files/de/web/api/canvas_api/index.html b/files/de/web/api/canvas_api/index.html new file mode 100644 index 0000000000..50e6da1aae --- /dev/null +++ b/files/de/web/api/canvas_api/index.html @@ -0,0 +1,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> diff --git a/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html b/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html new file mode 100644 index 0000000000..10c4a7650c --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/advanced_animations/index.html @@ -0,0 +1,380 @@ +--- +title: Fortgeschrittene Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations +tags: + - Canvas + - Graphics + - Tutoria +translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</div> + +<div class="summary"> +<p>In dem vorherigem Kapitel machten wir einige <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">Basisanimationen</a> und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.</p> +</div> + +<h2 id="Einen_Ball_zeichnen">Einen Ball zeichnen</h2> + +<p>Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.</p> + +<pre class="brush: html"><canvas id="canvas" width="600" height="300"></canvas> +</pre> + +<p>Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein <code>ball</code> - Objekt erstellen, welches Eigenschaften und eine <code>draw()</code> - Methode enthält, um es in die Canvas zu zeichnen.</p> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +var ball = { + x: 100, + y: 100, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +ball.draw();</pre> + +<p>Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.</p> + +<h2 id="Geschwindigkeit_hinzufügen">Geschwindigkeit hinzufügen</h2> + +<p>Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">vorherigen Kapitel</a> von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.</p> + +<pre class="brush: js; highlight:[8,9,24,25]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw(); +</pre> + +<h2 id="Gebundenheit">Gebundenheit</h2> + +<p>Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die <code>x</code> - und <code>y</code>position von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.</p> + +<pre class="brush: js">if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; +} +if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; +}</pre> + +<h3 id="Erste_Demo">Erste Demo</h3> + +<p>Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Erste_Demo", "610", "310")}}</p> + +<h2 id="Acceleration">Acceleration</h2> + +<p>Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:</p> + +<pre class="brush: js">ball.vy *= .99; +ball.vy += .25;</pre> + +<p>Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.</p> + +<div class="hidden"> +<h6 id="Nächste_Demo">Nächste Demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Acceleration", "610", "310")}}</p> + +<h2 id="Spureneffekt">Spureneffekt</h2> + +<p>Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}} - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.</p> + +<pre class="brush: js">ctx.fillStyle = 'rgba(255,255,255,0.3)'; +ctx.fillRect(0,0,canvas.width,canvas.height);</pre> + +<div class="hidden"> +<h6 id="Dritte_Demo">Dritte Demo</h6> + +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 2, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function draw() { + ctx.fillStyle = 'rgba(255,255,255,0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + ball.vy *= .99; + ball.vy += .25; + + if (ball.y + ball.vy > canvas.height || + ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || + ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mouseover', function(e){ + raf = window.requestAnimationFrame(draw); +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); +}); + +ball.draw();</pre> +</div> + +<p>{{EmbedLiveSample("Spureneffekt", "610", "310")}}</p> + +<h2 id="Mauskontrolle_hinzufügen">Mauskontrolle hinzufügen</h2> + +<p>Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das <code><a href="/en-US/docs/Web/Reference/Events/mousemove">mousemove</a></code> - Ereignis benutzen. Das <code><a href="/en-US/docs/Web/Events/click">click</a></code> - Ereignis lässt den Ball wieder hüpfen.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas></pre> +</div> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var raf; +var running = false; + +var ball = { + x: 100, + y: 100, + vx: 5, + vy: 1, + radius: 25, + color: 'blue', + draw: function() { + ctx.beginPath(); + ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true); + ctx.closePath(); + ctx.fillStyle = this.color; + ctx.fill(); + } +}; + +function clear() { + ctx.fillStyle = 'rgba(255,255,255,0.3)'; + ctx.fillRect(0,0,canvas.width,canvas.height); +} + +function draw() { + clear(); + ball.draw(); + ball.x += ball.vx; + ball.y += ball.vy; + + if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { + ball.vy = -ball.vy; + } + if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { + ball.vx = -ball.vx; + } + + raf = window.requestAnimationFrame(draw); +} + +canvas.addEventListener('mousemove', function(e){ + if (!running) { + clear(); + ball.x = e.clientX; + ball.y = e.clientY; + ball.draw(); + } +}); + +canvas.addEventListener("click",function(e){ + if (!running) { + raf = window.requestAnimationFrame(draw); + running = true; + } +}); + +canvas.addEventListener("mouseout",function(e){ + window.cancelAnimationFrame(raf); + running = false; +}); + +ball.draw(); +</pre> + +<p>Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.</p> + +<p>{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}</p> + +<h2 id="Breakout">Breakout</h2> + +<p>Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein <a href="http://de.wikipedia.org/wiki/Breakout(Computerspiel)">Breakout</a> - Spiel zu verwandeln? Schauen Sie sich unseren <a href="/en-US/docs/Games">Spieleentwickelungsbereich</a> an für mehr auf Spiele bezogene Artikel.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("window.requestAnimationFrame()")}}</li> + <li><a href="/en-US/docs/Games/Techniques/Efficient_animation_for_web_games">Effiziete Animation für Webspiele</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html b/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html new file mode 100644 index 0000000000..6caa27b3ef --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html @@ -0,0 +1,785 @@ +--- +title: Stile und Farben verwenden +slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors +translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</div> + +<div class="summary"> +<p class="Normal">Im Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes" title="Web/Guide/HTML/Canvas_tutorial/Drawing_shapes">Zeichnen von Formen</a> haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.</p> +</div> + +<h2 id="Colors" name="Colors">Farben</h2> + +<p class="Normal">Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: <code>fillStyle</code> und <code>strokeStyle</code>.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}</dt> + <dd> + <p class="Normal"> Bestimmt den Stil in dem die Form gefüllt wird.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}</dt> + <dd> + <p class="Normal">Bestimmt den Stil der Umrandungslinien.</p> + </dd> +</dl> + +<p class="Normal"><code>color</code> steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).</p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Nach dem Setzen von <code>strokeStyle</code> und/oder <code>fillStyle</code> wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen <code>fillStyle</code> bzw. <code>strokeStyle</code> neu definiert werden.</p> +</div> + +<p class="Normal">Der String <code>color</code> sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.</p> + +<pre class="brush: js">// these all set the fillStyle to 'orange' + +ctx.fillStyle = "orange"; +ctx.fillStyle = "#FFA500"; +ctx.fillStyle = "rgb(255,165,0)"; +ctx.fillStyle = "rgba(255,165,0,1)"; +</pre> + +<h3 class="Normal" id="Beispiel_für_fillStyle">Beispiel für <code>fillStyle</code></h3> + +<p class="Normal">In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.</p> + +<pre class="brush: js;highlight[5,6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ',0)'; + ctx.fillRect(j*25,i*25,25,25); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"> </pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>Das Ergebnis:</p> + +<p>{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Beispiel für <code>strokeStyle</code></h3> + +<p class="Normal">Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die <code>strokeStyle</code> Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode <code>arc()</code> zeichnen wir Kreise an Stelle der Quadrate.</p> + +<pre class="brush: js;highlight[5,6]"> function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i=0;i<6;i++){ + for (var j=0;j<6;j++){ + ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' + + Math.floor(255-42.5*j) + ')'; + ctx.beginPath(); + ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true); + ctx.stroke(); + } + } + } +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>The result looks like this:</p> + +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> + +<h2 id="Transparency" name="Transparency">Transparenz</h2> + +<p class="Normal">Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft <code>globalAlpha</code> oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}</dt> + <dd> + <p class="Normal">Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.</p> + </dd> +</dl> + +<p class="Normal">Die Eigenschaft <code>globalTransparency</code> ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.</p> + +<p class="Normal">Die Eigenschaften <code>strokeStyle</code> und <code>fillStyle</code> akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:</p> + +<pre class="brush: js">// Assigning transparent colors to stroke and fill style + +ctx.strokeStyle = "rgba(255,0,0,0.5)"; +ctx.fillStyle = "rgba(255,0,0,0.5)"; +</pre> + +<p class="Normal">Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).</p> + +<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Beispiel für <code>globalAlpha</code></h3> + +<p class="Normal">In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft <code>globalAlpha</code> wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der <code>for</code>-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.</p> + +<pre class="brush: js;highlight[15]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + // draw background + ctx.fillStyle = '#FD0'; + ctx.fillRect(0,0,75,75); + ctx.fillStyle = '#6C0'; + ctx.fillRect(75,0,75,75); + ctx.fillStyle = '#09F'; + ctx.fillRect(0,75,75,75); + ctx.fillStyle = '#F30'; + ctx.fillRect(75,75,75,75); + ctx.fillStyle = '#FFF'; + + // set transparency value + ctx.globalAlpha = 0.2; + + // Draw semi transparent circles + for (i=0;i<7;i++){ + ctx.beginPath(); + ctx.arc(75,75,10+10*i,0,Math.PI*2,true); + ctx.fill(); + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h3 id="An_example_using_rgba()" name="An_example_using_rgba()">Beispiel für die Verwendung von <code>rgba()</code></h3> + +<p class="Normal">Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von <code>globalAlpha</code> erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.</p> + +<pre class="brush: js;highlight[16]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Draw background + ctx.fillStyle = 'rgb(255,221,0)'; + ctx.fillRect(0,0,150,37.5); + ctx.fillStyle = 'rgb(102,204,0)'; + ctx.fillRect(0,37.5,150,37.5); + ctx.fillStyle = 'rgb(0,153,255)'; + ctx.fillRect(0,75,150,37.5); + ctx.fillStyle = 'rgb(255,51,0)'; + ctx.fillRect(0,112.5,150,37.5); + + // Draw semi transparent rectangles + for (var i=0;i<10;i++){ + ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')'; + for (var j=0;j<4;j++){ + ctx.fillRect(5+i*14,5+j*37.5,14,27.5); + } + } +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}</p> + +<h2 id="Line_styles" name="Line_styles">Linienstile</h2> + +<p class="Normal">Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}</dt> + <dd>Setzt die Breite später gezeichneter Linien.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}</dt> + <dd>Definiert die Form der Linienenden.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}</dt> + <dd>Definiert die Form der „Ecken“, an denen sich Linien treffen.</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}</dt> + <dd>Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.</dd> +</dl> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}</dt> + <dd> + <p class="Normal">Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}</dt> + <dd> + <p class="Normal">Definiert das aktuelle Strichlierungsmuster.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}</dt> + <dd> + <p class="Normal">Beschreibt wo das Strichlierunsmuster startet.</p> + </dd> +</dl> + +<p class="Normal">Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.</p> + +<h3 id="A_lineWidth_example" name="A_lineWidth_example">Beispiel für <code>lineWidth</code></h3> + +<p class="Normal">Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.</p> + +<p class="Normal">Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.</p> + +<p class="Normal">Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + for (var i = 0; i < 10; i++){ + ctx.lineWidth = 1+i; + ctx.beginPath(); + ctx.moveTo(5+i*14,5); + ctx.lineTo(5+i*14,140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}</p> + +<p class="Normal">Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.</p> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/201/Canvas-grid.png"></p> + +<p class="Normal">Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.</p> + +<p class="Normal">Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.</p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom <code>lineCap</code>-Stil abhängt, der standardmäßig auf <code>butt</code> eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den <code>lineCap</code>-Sti auf <code>square</code> setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)</p> + +<p class="Normal">Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit <code>closePath() </code>geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen <code>lineJoin</code>-Stil verbunden; dessen Standardwert ist <code>miter</code>, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.</p> +</div> + +<p class="Normal">Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.</p> + +<p class="Normal">Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.</p> + +<h3 id="A_lineCap_example" name="A_lineCap_example">Beispiel für <code>lineCap</code></h3> + +<p class="Normal">Die Eigenschaft <code>lineCap</code> bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: <code>butt</code> (Standardwert), <code>round</code> und <code>square</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/236/Canvas_linecap.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>butt</code></dt> + <dd> + <p class="Normal">Glatte Enden an den Endpunkten.</p> + </dd> + <dt><code>round</code></dt> + <dd> + <p class="Normal">Abgerundete Enden.</p> + </dd> + <dt><code>square</code></dt> + <dd> + <p class="Normal">Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.</p> + </dd> +</dl> + +<p class="Normal">In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für <code>lineCap</code>. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.</p> + +<p class="Normal">Die linke Linie verwendet die Option <code>butt</code>. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option <code>round</code>, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option <code>square</code>. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineCap = ['butt','round','square']; + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.beginPath(); + ctx.moveTo(10,10); + ctx.lineTo(140,10); + ctx.moveTo(10,140); + ctx.lineTo(140,140); + ctx.stroke(); + + // Draw lines + ctx.strokeStyle = 'black'; + for (var i=0;i<lineCap.length;i++){ + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25+i*50,10); + ctx.lineTo(25+i*50,140); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h3 id="A_lineJoin_example" name="A_lineJoin_example">Beispiel für <code>lineJoin</code></h3> + +<p class="Normal">Die Eigenschaft <code>lineJoin</code> bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).</p> + +<p class="Normal">Diese Eigenschaft kann drei mögliche Werte annehmen: <code>round</code>, <code>bevel</code> und <code>miter</code> (Standardeinstellung). Beachten Sie, dass die <code>lineJoin</code>-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> + +<dl> + <dt><code>round</code></dt> + <dd> + <p class="Normal">Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.</p> + </dd> + <dt><code>bevel</code></dt> + <dd> + <p class="Normal">Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.</p> + </dd> + <dt><code>miter</code></dt> + <dd> + <p class="Normal">Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft <code>miterLimit</code> beeinflusst, welche später erklärt wird.</p> + </dd> +</dl> + +<p class="Normal">Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von <code>lineJoin</code> anhand von drei Linienzügen; das Ergebnis sehen Sie oben.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var lineJoin = ['round','bevel','miter']; + ctx.lineWidth = 10; + for (var i=0;i<lineJoin.length;i++){ + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5,5+i*40); + ctx.lineTo(35,45+i*40); + ctx.lineTo(75,5+i*40); + ctx.lineTo(115,45+i*40); + ctx.lineTo(155,5+i*40); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h3 id="A_demo_of_the_miterLimit_property" name="A_demo_of_the_miterLimit_property">Beispiel für die Eigenschaft <code>miterLimit</code></h3> + +<p class="Normal">Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option <code>miter</code> die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. <em>miter</em>) aber exponentiell.</p> + +<p class="Normal">Die Eigenschaft <code>miterLimit</code> bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung <code>bevel</code>. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von <code>miterLimit</code> (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann <code>miterLimit</code> unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.</p> + +<p class="Normal">Präziser gesagt ist beschreibt <code>miterLimit</code> das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.</p> + +<ul> + <li><code>miterLimit</code> = <strong>max</strong> <code>miterLength</code> / <code>lineWidth</code> = 1 / <strong>sin</strong> ( <strong>min</strong> <em>θ</em> / 2 )</li> + <li>Der Standardwert von <code>miterLimit</code> = <code>10.0</code> schneidet alle Überhänge von Winkeln kleiner als 11° ab.</li> + <li>Ein Wert von √2 ≈ 1.4142136 (aufgerundet) stutzt Überhänge bei spitzen Winkeln, und belässt nur bei stumpfen und rechten Winkeln zusätzlich Raum für die Gehrung.</li> + <li>Ein Wert von 1.0 ist erlaubt, schneidet aber alle Überhänge ab.</li> + <li>Werte kleiner als 1.0 sind nicht erlaubt.</li> +</ul> + +<p class="Normal">In dieser einfachen Demonstration können Sie den Wert für <code>miterLimit</code> dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.</p> + +<p class="Normal">Stellen Sie in diesem Programm ein <code>miterLimit</code> kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist <code>miterLimit</code> größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.</p> + +<pre class="brush: js;highlight[18]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Clear canvas + ctx.clearRect(0,0,150,150); + + // Draw guides + ctx.strokeStyle = '#09f'; + ctx.lineWidth = 2; + ctx.strokeRect(-5,50,160,50); + + // Set line styles + ctx.strokeStyle = '#000'; + ctx.lineWidth = 10; + + // check input + if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) { + ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value); + } else { + alert('Value must be a positive number'); + } + + // Draw lines + ctx.beginPath(); + ctx.moveTo(0,100); + for (i=0;i<24;i++){ + var dy = i%2==0 ? 25 : -25 ; + ctx.lineTo(Math.pow(i,1.5)*2,75+dy); + } + ctx.stroke(); + return false; +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><table> + <tr> + <td><canvas id="canvas" width="150" height="150"></canvas></td> + <td>Change the <code>miterLimit</code> by entering a new value below and clicking the redraw button.<br><br> + <form onsubmit="return draw();"> + <label>Miter limit</label> + <input type="text" size="3" id="miterLimit"/> + <input type="submit" value="Redraw"/> + </form> + </td> + </tr> +</table></pre> + +<pre class="brush: js">document.getElementById('miterLimit').value = document.getElementById('canvas').getContext('2d').miterLimit; +draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}</p> + +<h2 class="Normal" id="Strichlierte_Linien_verwenden">Strichlierte Linien verwenden</h2> + +<p class="Normal">Die Methode <code>setLineDash</code> und die Eigenschaft <code>lineDashOffset</code> definieren die Strichlierung von Linien. <code>setLineDash</code> akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei <code>lineDashOffset</code> einen Versatz am Start des Musters definiert.</p> + +<p>In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">einfache Animationen</a> zu erzeugen.</p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="110" height="110"></canvas></pre> +</div> + +<pre class="brush: js;highlight[6]">var ctx = document.getElementById('canvas').getContext('2d'); +var offset = 0; + +function draw() { + ctx.clearRect(0,0, canvas.width, canvas.height); + ctx.setLineDash([4, 2]); + ctx.lineDashOffset = -offset; + ctx.strokeRect(10,10, 100, 100); +} + +function march() { + offset++; + if (offset > 16) { + offset = 0; + } + draw(); + setTimeout(march, 20); +} + +march();</pre> + +<p>{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}</p> + +<h2 id="Gradients" name="Gradients">Gradienten</h2> + +<p class="Normal">Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zu.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}</dt> + <dd> + <p class="Normal">Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (<code>x1</code>, <code>y1</code>) und Zielpunkt (<code>x2</code>, <code>y2</code>).</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}</dt> + <dd> + <p class="Normal">Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (<code>x1</code>, <code>y1</code>) und einem Radius von <code>r1</code>, der zweite mit Mittelpunkt (<code>x2</code>, <code>y2</code>) und demRadius <code>r2</code>.</p> + </dd> +</dl> + +<p>For example:</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0, 0, 150, 150); +var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100); +</pre> + +<p class="Normal">Sobald wir ein <code>canvasGradient</code>-Objekt erzeugt haben, können wir mit der Methode <code>addColorStop()</code> Farben zuordnen.</p> + +<dl> + <dt>{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}</dt> + <dd> + <p class="Normal">Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.</p> + </dd> +</dl> + +<p class="Normal">Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.</p> + +<pre class="brush: js">var lineargradient = ctx.createLinearGradient(0,0,150,150); +lineargradient.addColorStop(0, 'white'); +lineargradient.addColorStop(1, 'black'); +</pre> + +<h3 id="A_createLinearGradient_example" name="A_createLinearGradient_example">Beispiel für <code>createLinearGradient</code></h3> + +<p class="Normal">In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl <code>strokeStyle</code> als auch <code>fillStyle</code> ein <code>canvasGradient</code>-Objekt als Eingabe.</p> + +<p> </p> + +<pre class="brush: js;highlight[5,11]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var lingrad = ctx.createLinearGradient(0,0,0,150); + lingrad.addColorStop(0, '#00ABEB'); + lingrad.addColorStop(0.5, '#fff'); + lingrad.addColorStop(0.5, '#26C000'); + lingrad.addColorStop(1, '#fff'); + + var lingrad2 = ctx.createLinearGradient(0,50,0,95); + lingrad2.addColorStop(0.5, '#000'); + lingrad2.addColorStop(1, 'rgba(0,0,0,0)'); + + // assign gradients to fill and stroke styles + ctx.fillStyle = lingrad; + ctx.strokeStyle = lingrad2; + + // draw shapes + ctx.fillRect(10,10,130,130); + ctx.strokeRect(50,50,50,50); + +} +</pre> + +<p> </p> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p class="Normal">Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.</p> + +<p class="Normal">Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.</p> + +<p>{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}</p> + +<h3 id="A_createRadialGradient_example" name="A_createRadialGradient_example">Beispiel für <code>createRadialGradient</code></h3> + +<p class="Normal">In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.</p> + +<pre class="brush: js;highlight[5,10,15,20]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // Create gradients + var radgrad = ctx.createRadialGradient(45,45,10,52,50,30); + radgrad.addColorStop(0, '#A7D30C'); + radgrad.addColorStop(0.9, '#019F62'); + radgrad.addColorStop(1, 'rgba(1,159,98,0)'); + + var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50); + radgrad2.addColorStop(0, '#FF5F98'); + radgrad2.addColorStop(0.75, '#FF0188'); + radgrad2.addColorStop(1, 'rgba(255,1,136,0)'); + + var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40); + radgrad3.addColorStop(0, '#00C9FF'); + radgrad3.addColorStop(0.8, '#00B5E2'); + radgrad3.addColorStop(1, 'rgba(0,201,255,0)'); + + var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90); + radgrad4.addColorStop(0, '#F4F201'); + radgrad4.addColorStop(0.8, '#E4C700'); + radgrad4.addColorStop(1, 'rgba(228,199,0,0)'); + + // draw shapes + ctx.fillStyle = radgrad4; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad3; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad2; + ctx.fillRect(0,0,150,150); + ctx.fillStyle = radgrad; + ctx.fillRect(0,0,150,150); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p class="Normal">Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.</p> + +<p class="Normal">Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf <code>#019F62</code> auch als <code>rgba(1,159,98,1)</code> geschrieben werden könnte.</p> + +<p>{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}</p> + +<h2 id="Patterns" name="Patterns">Muster</h2> + +<p class="Normal">In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: <code>createPattern()</code></p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}</dt> + <dd> + <p class="Normal">Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. <code>image</code> ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String <code>image</code> gibt an wie das Bild benutzt wird.</p> + </dd> +</dl> + +<p class="Normal"><code>type</code> enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.</p> + +<dl> + <dt><code>repeat</code></dt> + <dd> + <p class="Normal">Wiederhole („kachle“) das Bild horizontal und vertikal.</p> + </dd> + <dt><code>repeat-x</code></dt> + <dd> + <p class="Normal">Wiederhole das Bild nur horizontal.</p> + </dd> + <dt><code>repeat-y</code></dt> + <dd> + <p class="Normal">Nur vertikale Wiederholung.</p> + </dd> + <dt><code>no-repeat</code></dt> + <dd> + <p class="Normal">Keine Wiederholung, das Bild wird nur einmal benutzt.</p> + </dd> +</dl> + +<p> </p> + +<p class="Normal">Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer <code>fillStyle</code>- oder <code>strokeStyle</code>-Eigenschaft zuordnen.</p> + +<pre class="brush: js">var img = new Image(); +img.src = 'someimage.png'; +var ptrn = ctx.createPattern(img,'repeat'); +</pre> + +<p> </p> + +<div class="note"> +<p class="Normal"><strong>Anmerkung:</strong> Wie bei <code>drawImage()</code> müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.</p> +</div> + +<h3 id="A_createPattern_example" name="A_createPattern_example">Beispiel für <code>createPattern</code></h3> + +<p class="Normal">Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem <code>fillStyle</code> zuzuordnen. Bemerkenswert ist hierbei die Verwendung des <code>onload()</code>-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.</p> + +<pre class="brush: js;highlight[10]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + // create new image object to use as pattern + var img = new Image(); + img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; + img.onload = function(){ + + // create pattern + var ptrn = ctx.createPattern(img,'repeat'); + ctx.fillStyle = ptrn; + ctx.fillRect(0,0,150,150); + + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> + +<pre class="brush: js">draw();</pre> + +<p>The result looks like this:</p> +</div> + +<p>{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}</p> + +<h2 id="Schatten">Schatten</h2> + +<p class="Normal">An der Erzeugung von Schatten sind vier Eignschaften beteiligt:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}</dt> + <dd> + <p class="Normal">Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}</dt> + <dd> + <p class="Normal">Wie <code>shadowOffsetY</code>, aber in vertikaler Richtung.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}</dt> + <dd> + <p class="Normal">Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.</p> + </dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}</dt> + <dd> + <p class="Normal">Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.</p> + </dd> +</dl> + +<p class="Normal">Die Eigenschaften <code>shadowOffsetX</code> und <code>shadowOffsetY</code> bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.</p> + +<p class="Normal">Die Eigenschaft <code>shadowBlur</code> definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.</p> + +<p class="Normal">Die Eigenschaft <code>shadowColor</code> ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.</p> + +<div class="note"> +<p><strong>Note:</strong> Schatten werden nur bei <code>source-over</code> <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Web/Guide/HTML/Canvas_tutorial/Compositing">compositing operations</a> gezeichnet.</p> +</div> + +<h3 id="Beispiel_für_Text_mit_Schatteneffekt">Beispiel für Text mit Schatteneffekt</h3> + +<p class="Normal">Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.</p> + +<pre class="brush: js;highlight[4,5,6,7]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.shadowOffsetX = 2; + ctx.shadowOffsetY = 2; + ctx.shadowBlur = 2; + ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; + + ctx.font = "20px Times New Roman"; + ctx.fillStyle = "Black"; + ctx.fillText("Sample String", 5, 30); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="80"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}</p> + +<p>Wir werden uns die <code>font</code>-Eigenschaft und die <code>fillText</code>-Methode im nächsten Kapitel über das <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">Zeichnen von Text</a> genauer ansehen.</p> + +<h2 id="Canvas_Füllregeln">Canvas Füllregeln</h2> + +<p class="Normal">Bei der Verwendung von <code>fill</code> ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.</p> + +<p>Zwei Werte sind möglich:</p> + +<ul> + <li><code><strong>"nonzero</strong></code>": Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Nonzero-rule">non-zero winding rule</a>, der Standardwert.</li> + <li><code><strong>"evenodd"</strong></code>: Die <a class="external external-icon" href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">even-odd rule</a>.</li> +</ul> + +<p>In diesem Beispiel verwenden wir die <code>evenodd</code>-Regel.</p> + +<pre class="brush: js;highlight[6]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.beginPath(); + ctx.arc(50, 50, 30, 0, Math.PI*2, true); + ctx.arc(50, 50, 15, 0, Math.PI*2, true); + ctx.fill("evenodd"); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="100" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/basic_animations/index.html b/files/de/web/api/canvas_api/tutorial/basic_animations/index.html new file mode 100644 index 0000000000..78ca0ac2fc --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/basic_animations/index.html @@ -0,0 +1,307 @@ +--- +title: Einfache Animationen +slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations +translation_of: Web/API/Canvas_API/Tutorial/Basic_animations +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</div> + +<div class="summary"> +<p>Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.</p> +</div> + +<p>Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.</p> + +<h2 id="Basic_animation_steps" name="Basic_animation_steps">Grundlagen der Animation</h2> + +<p>Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:</p> + +<ol> + <li><strong>Bereinigen Sie die Zeichenfläche <em>(canvas)</em></strong><br> + Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.</li> + <li><strong>Sichern Sie den Canvas-Zustand</strong><br> + Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die <code>save()</code>-Methode.</li> + <li><strong>Zeichnen Sie die animierte Form</strong><br> + Hier erzeugen Sie nun endlich die eigentliche Animation.</li> + <li><strong>Setzen Sie den Canvas-Zustand zurück.</strong><br> + Mit der <code>restore()</code>-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.</li> +</ol> + +<h2 id="Controlling_an_animation" name="Controlling_an_animation">Steuerung einer Animation</h2> + +<p>Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine <code>for</code>-Schleife zu erzeugen.</p> + +<p>Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:</p> + +<h3 id="Updates_nach_Zeitplan">Updates nach Zeitplan</h3> + +<p>Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.</p> + +<dl> + <dt>{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}</dt> + <dd>Ruft die unter <code>function</code> spezifierte Funktion wiederholend nach der in <code>delay</code> (Milisekunden) definierten Zeitspanne auf.</dd> + <dt>{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}</dt> + <dd>Ruft die spezifizierte Funktion nach der unter <code>delay</code> festgelegten Zeitspanne einmalig auf.</dd> + <dt>{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}</dt> + <dd>Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.</dd> +</dl> + +<p>If you don't want any user interaction you can use the <code>setInterval()</code> function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use <code>setTimeout()</code>. By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.</p> + +<div class="note"> +<p>In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The <code>requestAnimationFrame</code> method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article <a href="/en-US/docs/Games/Anatomy">Anatomy of a video game</a> in our <a href="/en-US/docs/Games">Game development zone</a>.</p> +</div> + +<h2 id="An_animated_solar_system">An animated solar system</h2> + +<p>This example animates a small model of our solar system.</p> + +<pre class="brush: js">var sun = new Image(); +var moon = new Image(); +var earth = new Image(); +function init() { + sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png'; + moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png'; + earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png'; + window.requestAnimationFrame(draw); +} + +function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + + ctx.globalCompositeOperation = 'destination-over'; + ctx.clearRect(0, 0, 300, 300); // clear canvas + + ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; + ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)'; + ctx.save(); + ctx.translate(150, 150); + + // Earth + var time = new Date(); + ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds()); + ctx.translate(105, 0); + ctx.fillRect(0, -12, 50, 24); // Shadow + ctx.drawImage(earth, -12, -12); + + // Moon + ctx.save(); + ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds()); + ctx.translate(0, 28.5); + ctx.drawImage(moon, -3.5, -3.5); + ctx.restore(); + + ctx.restore(); + + ctx.beginPath(); + ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit + ctx.stroke(); + + ctx.drawImage(sun, 0, 0, 300, 300); + + window.requestAnimationFrame(draw); +} + +init(); +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="300"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}</p> + +<h2 id="An_animated_clock">An animated clock</h2> + +<p>This example draws an animated clock, showing your current time.</p> + +<pre class="brush: js">function clock() { + var now = new Date(); + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.save(); + ctx.clearRect(0, 0, 150, 150); + ctx.translate(75, 75); + ctx.scale(0.4, 0.4); + ctx.rotate(-Math.PI / 2); + ctx.strokeStyle = 'black'; + ctx.fillStyle = 'white'; + ctx.lineWidth = 8; + ctx.lineCap = 'round'; + + // Hour marks + ctx.save(); + for (var i = 0; i < 12; i++) { + ctx.beginPath(); + ctx.rotate(Math.PI / 6); + ctx.moveTo(100, 0); + ctx.lineTo(120, 0); + ctx.stroke(); + } + ctx.restore(); + + // Minute marks + ctx.save(); + ctx.lineWidth = 5; + for (i = 0; i < 60; i++) { + if (i % 5!= 0) { + ctx.beginPath(); + ctx.moveTo(117, 0); + ctx.lineTo(120, 0); + ctx.stroke(); + } + ctx.rotate(Math.PI / 30); + } + ctx.restore(); + + var sec = now.getSeconds(); + var min = now.getMinutes(); + var hr = now.getHours(); + hr = hr >= 12 ? hr - 12 : hr; + + ctx.fillStyle = 'black'; + + // write Hours + ctx.save(); + ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec); + ctx.lineWidth = 14; + ctx.beginPath(); + ctx.moveTo(-20, 0); + ctx.lineTo(80, 0); + ctx.stroke(); + ctx.restore(); + + // write Minutes + ctx.save(); + ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec); + ctx.lineWidth = 10; + ctx.beginPath(); + ctx.moveTo(-28, 0); + ctx.lineTo(112, 0); + ctx.stroke(); + ctx.restore(); + + // Write seconds + ctx.save(); + ctx.rotate(sec * Math.PI / 30); + ctx.strokeStyle = '#D40000'; + ctx.fillStyle = '#D40000'; + ctx.lineWidth = 6; + ctx.beginPath(); + ctx.moveTo(-30, 0); + ctx.lineTo(83, 0); + ctx.stroke(); + ctx.beginPath(); + ctx.arc(0, 0, 10, 0, Math.PI * 2, true); + ctx.fill(); + ctx.beginPath(); + ctx.arc(95, 0, 10, 0, Math.PI * 2, true); + ctx.stroke(); + ctx.fillStyle = 'rgba(0, 0, 0, 0)'; + ctx.arc(0, 0, 3, 0, Math.PI * 2, true); + ctx.fill(); + ctx.restore(); + + ctx.beginPath(); + ctx.lineWidth = 14; + ctx.strokeStyle = '#325FA2'; + ctx.arc(0, 0, 142, 0, Math.PI * 2, true); + ctx.stroke(); + + ctx.restore(); + + window.requestAnimationFrame(clock); +} + +window.requestAnimationFrame(clock);</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}</p> + +<h2 id="A_looping_panorama">A looping panorama</h2> + +<p>In this example, a panorama is scrolled left-to-right. We're using <a href="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg" title="http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg">an image of Yosemite National Park</a> we took from Wikipedia, but you could use any image that's larger than the canvas.</p> + +<pre class="brush: js">var img = new Image(); + +// User Variables - customize these to change the image being scrolled, its +// direction, and the speed. + +img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg'; +var CanvasXSize = 800; +var CanvasYSize = 200; +var speed = 30; // lower is faster +var scale = 1.05; +var y = -4.5; // vertical offset + +// Main program + +var dx = 0.75; +var imgW; +var imgH; +var x = 0; +var clearX; +var clearY; +var ctx; + +img.onload = function() { + imgW = img.width * scale; + imgH = img.height * scale; + + if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas + if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas + else { clearX = CanvasXSize; } + if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas + else { clearY = CanvasYSize; } + + // get canvas context + ctx = document.getElementById('canvas').getContext('2d'); + + // set refresh rate + return setInterval(draw, speed); +} + +function draw() { + ctx.clearRect(0, 0, clearX, clearY); // clear the canvas + + // if image is <= Canvas Size + if (imgW <= CanvasXSize) { + // reset, start from beginning + if (x > CanvasXSize) { x = -imgW + x; } + // draw additional image1 + if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); } + // draw additional image2 + if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); } + } + + // if image is > Canvas Size + else { + // reset, start from beginning + if (x > (CanvasXSize)) { x = CanvasXSize - imgW; } + // draw aditional image + if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); } + } + // draw image + ctx.drawImage(img, x, y,imgW, imgH); + // amount to move + x += dx; +} +</pre> + +<p>Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the <code>CanvasXZSize</code> and <code>CanvasYSize</code> variables in the JavaScript code.</p> + +<pre class="brush: html"><canvas id="canvas" width="800" height="200"></canvas></pre> + +<p>{{EmbedLiveSample("A_looping_panorama", "830", "230")}}</p> + +<h2 id="Other_examples" name="Other_examples">Other examples</h2> + +<dl> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster" title="/en-US/docs/Web/Guide/HTML/A_basic_ray-caster">A basic ray-caster</a></dt> + <dd>A good example of how to do animations using keyboard controls.</dd> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Advanced_animations">Advanced animations</a></dt> + <dd>We will have a look at some advanced animation techniques and physics in the next chapter.</dd> +</dl> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/basic_usage/index.html b/files/de/web/api/canvas_api/tutorial/basic_usage/index.html new file mode 100644 index 0000000000..f89af7fa04 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/basic_usage/index.html @@ -0,0 +1,154 @@ +--- +title: Grundlagen Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen +tags: + - Canvas + - Graphics + - HTML + - Intermediate + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Basic_usage +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}</div> + +<div class="summary"> +<p>Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.</p> +</div> + +<h2 id="Das_<canvas>-Element">Das <code><canvas></code>-Element</h2> + +<p>Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:</p> + +<pre class="brush: html"><canvas id="tutorial" width="150" height="150"></canvas> +</pre> + +<p>Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute <code>src</code> und <code>alt</code> nicht besitzt. Das <code><canvas></code>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-<a href="/de/docs/Web/API/HTMLCanvasElement">Eigenschaften</a> gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von <strong>300px</strong> und eine Höhe von <strong>150px</strong>. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute <code>width</code> und <code>height</code> explizit im <code><canvas></code> und nicht über CSS.</p> +</div> + +<p>Das <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute#id">id</a>-Attribut ist eines der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Globale_Attribute">globalen Attribute</a> in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine <code>id</code> zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.</p> + +<p>Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei <a href="https://developer.mozilla.org/de/docs/SVG">SVG</a>)</p> + +<div id="section_2"> +<h3 id="Fallback">Fallback</h3> + +<p>Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.</p> + +<p>Beispiele:</p> + +<pre class="brush: html"><canvas id="stockGraph" width="150" height="150"> + aktueller Wechselkurs: $3.15 +0.15 +</canvas> + +<canvas id="clock" width="150" height="150"> + <img src="images/clock.png" width="150" height="150" alt=""/> +</canvas> +</pre> + +<h3 id="Benötigter_<canvas>-Tag">Benötigter <code></canvas></code>-Tag</h3> + +<p>Im Unterschied zu dem {{HTMLElement("img")}}-Element, <strong>benötigt</strong> das {{HTMLElement("canvas")}}-Element den Endtag (<code></canvas></code>).</p> + +<p>Wenn kein Fallback definiert wird, reicht ein <code><canvas id="foo" ...></canvas></code> völlig aus.</p> + +<h2 id="Der_Kontext">Der Kontext</h2> + +<p>{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a> (3D context) basierend auf <a class="external" href="http://www.khronos.org/opengles/" rel="external" title="http://en.wikipedia.org/wiki/OpenGL_ES">OpenGL ES</a>.</p> + +<p>Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine <a href="/en-US/docs/Web/API/HTMLCanvasElement#Methods" title="/en-US/docs/Web/API/HTMLCanvasElement#Methods">Methode</a> <code>getContext()</code>, mit der der Kontext definiert wird. <code>getContext()</code> benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".</p> + +<pre class="brush: js">var canvas = document.getElementById("tutorial"); +var ctx = canvas.getContext("2d"); +</pre> + +<p>Die erste Zeile speichert in der Variablen <code>canvas</code> den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die <code>getContext()</code>-Methode aufgerufen, um den Kontext in der Variablen <code>ctx</code> zu speichern.</p> + +<div id="section_5"> +<h2 id="Browserkompatibilität_prüfen">Browserkompatibilität prüfen</h2> + +<p>Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der <code>getContext()</code>-Methode überprüft wird. Beispiel:</p> + +<pre class="brush: js">var canvas = document.getElementById('tutorial'); + +if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + // weiterer Code +} else { + alert("Dein Browser unterstützt das <canvas> Element nicht") +} +</pre> +</div> +</div> + +<h2 id="HTML-Struktur">HTML-Struktur</h2> + +<p>Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.</p> +</div> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Canvas tutorial</title> + <script type="text/javascript"> + function draw() { + var canvas = document.getElementById('tutorial'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + } + } + </script> + <style type="text/css"> + canvas { border: 1px solid black; } + </style> + </head> + <body onload="draw();"> + <canvas id="tutorial" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Das Skript enthält eine Funktion <code>draw()</code>, die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.</p> + +<p>So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.</p> + +<p>{{EmbedLiveSample("HTML-Struktur", 160, 160)}}</p> + +<h2 id="Einfaches_Beispiel">Einfaches Beispiel</h2> + +<p>Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <script type="application/javascript"> + function draw() { + var canvas = document.getElementById("canvas"); + if (canvas.getContext) { + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect(10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect(30, 30, 55, 50); + } + } + </script> + </head> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html b/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html new file mode 100644 index 0000000000..f23e7664b5 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/drawing_shapes/index.html @@ -0,0 +1,453 @@ +--- +title: Formen zeichnen mit Canvas +slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen +translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes +--- +<p>{{CanvasSidebar}}</p> + +<h2 id="Koordinatensystem">Koordinatensystem</h2> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/224/Canvas_default_grid.png" style="float: right; height: 220px; width: 220px;">Bevor wir mit dem Zeichnen beginnen können, müssen wir über das <em>canvas grid</em> oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.</p> + +<h2 id="Rechtecke_zeichnen">Rechtecke zeichnen</h2> + +<p>Nicht wie in <a href="/en-US/docs/SVG" rel="internal" title="en/SVG">SVG</a>, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.</p> + +<div id="section_3"> +<p>Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:</p> + +<dl> + <dt><code>fillRect(<em>x</em>, <em>y</em>, <em>breite</em>, <em>höhe</em>)</code></dt> + <dd>Zeichnet ein gefülltes Rechteck</dd> + <dt><code>strokeRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt> + <dd>Zeichnet den Rahmen eines Rechteckes</dd> + <dt><code>clearRect(<em>x</em>, <em>y</em>, <code><em>breite</em>, <em>höhe</em></code>)</code></dt> + <dd>Der Bereich des Rechteckes wird transparent</dd> +</dl> + +<p>Alle drei Funktionen benötigen die selben drei Argumente. <code>x</code> und <code>y</code> beschreibt die Position (<em>siehe Koordinatensystem</em>). <code>breite</code> und <code>höhe</code> beschreiben die Größe des Rechteckes.</p> + +<h3 id="Beispiel_mit_Rechtecken">Beispiel mit Rechtecken</h3> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100); + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}</p> + +<p>Die <code>fillRect()</code>-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die <code>clearRect()</code>-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die <code>strokeRect()</code>-Methode einen 50px großen schwarzen Rahmen in der Mitte.</p> + +<p>Später werden wir zwei alternative Methoden für <code>clearRect()</code> behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.</p> + +<p>Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.</p> + +<h2 id="Pfade_zeichnen">Pfade zeichnen</h2> + +<p>Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:</p> + +<dl> + <dt><code>beginPath()</code></dt> + <dd>Erstellt einen Pfad und beendet ggf. einen älteren.</dd> + <dt><code>closePath()</code></dt> + <dd>Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.</dd> + <dt><code>stroke()</code></dt> + <dd>Zeichnet die Kontur des Pfades.</dd> + <dt><code>fill()</code></dt> + <dd>Zeichnet die Füllung des Pfades.</dd> +</dl> + +<p>Zuerst wird also die <code>beginPath()</code>-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode <code>beginPath()</code> oder ein Aufruf der Methode <code>closePath()</code> löscht die Pfadanweisungen. Optional kann nun <code>closePath()</code> ausgeführt werden.</p> + +<div class="note"><strong>Hinweis:</strong> Wenn <code>fill()</code> ausgeführt wird, wird automatisch der Pfad beendet, sodass <code>closePath()</code> nicht mehr ausgeführt werden muss. Da ist <strong>nicht</strong> der Fall wenn <code>stroke()</code> ausgeführt wird.</div> + +<h3 id="Ein_Dreieck_zeichnen">Ein Dreieck zeichnen</h3> + +<p>So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.moveTo(75, 50); + ctx.lineTo(100, 75); + ctx.lineTo(100, 25); + ctx.fill(); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}</p> + +<h3 id="Stift_bewegen">Stift bewegen</h3> + +<p>Eine sehr sinnvolle Methode ist <code>moveTo()</code>. Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.</p> + +<dl> + <dt><code>moveTo(<em>x</em>, <em>y</em>)</code></dt> + <dd>Bewegt den Stift zu der Koordinate (x , y).</dd> +</dl> + +<p>Meist wird direkt nach dem Aufruf von <code>beginPath()</code> <code>moveTo()</code> ausgeführt. Außerdem kann man <code>moveTo()</code> für nichtverbundene Pfade benutzen. Beispiel (<code>moveTo()</code>-Aufrufe sind rote Linien):</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.beginPath(); + ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle + ctx.moveTo(110, 75); + ctx.arc(75, 75, 35, 0, Math.PI, false); // Mund + ctx.moveTo(65, 65); + ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // Linkes Auge + ctx.moveTo(95, 65); + ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Rechtes Auge + ctx.stroke(); + } +}</code></pre> + +<p>Demo:</p> + +<p>{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}</p> + +<div class="note"> +<p><strong>Hinweis:</strong> <code>arc()</code> zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.</p> +</div> + +<h3 id="Linien">Linien</h3> + +<p>Für Linien verwendet man die <code>lineTo()</code>-Methode:</p> + +<dl> + <dt><code>lineTo(<em>x</em>, <em>y</em>)</code></dt> + <dd>Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).</dd> +</dl> + +<p>Diese Methode erwartet wie <code>moveTo()</code> zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.</p> + +<p>Beispiel mit zwei Dreiecken:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Filled triangle + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(105, 25); + ctx.lineTo(25, 105); + ctx.fill(); + + // Stroked triangle + ctx.beginPath(); + ctx.moveTo(125, 125); + ctx.lineTo(125, 45); + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } +}</code></pre> + +<p>Es beginnt mit der Ausführung von <code>beginPath()</code> um eine neue Form zu beginnen. Danach wird mit <code>moveTo()</code> der Startpunkt festgelegt. Danach werden die Linien gezeichnet.</p> + +<p>{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}</p> + +<h3 id="Kreisbögen">Kreisbögen</h3> + +<p>Um Kreise oder Kreisbögen zu zeichnen, benutzt man die <code>arc()</code>-Methode.</p> + +<dl> + <dt><code>arc(<em>x</em>, <em>y</em>, <em>radius</em>, <em>startWinkel</em>, <em>endWinkel</em>, <em>uhrzeigersinn</em>)</code></dt> + <dd>Zeichnet einen Kreisbogen.</dd> +</dl> + +<p>Diese Methode benötigt sechs Parameter: <code>x</code> und <code>y</code> sind die Koordinaten des Mittelpunktes des Kreisbogens. <code>radius</code> ist der Radius des Kreisbogens. <code>startWinkel</code> und <code>endWinkel</code> definieren die Punkte auf dem Kreis in rad. Der <code>uhrzeigersinn</code>-Parameter ist <code>true</code>, wenn der Kreisbogen gegen den Uhrzeigersinn und <code>false</code> wenn er im Uhrzeigersinn gezeichnet werden soll.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: <code>rad = (Math.PI / 180) * deg</code>.</p> +</div> +Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:<br> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="200"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + for (var i = 0; i < 4; i++) { + for (var j = 0; j < 3; j++) { + ctx.beginPath(); + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle + var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } + } + } +}</code></pre> +{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} + +<h3 id="Bezier_und_quadratische_Kurven">Bezier und quadratische Kurven</h3> + +<p><a class="external" href="http://de.wikipedia.org/wiki/B%C3%A9zierkurve" rel="external" title="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">Bézierkurven</a> sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.</p> + +<dl> + <dt><code>quadraticCurveTo(cp1x, cp1y, x, y)</code></dt> + <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe des Kontrollpunktes mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>).</dd> + <dt><code>bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)</code></dt> + <dd>Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu <code>x</code> und <code>y</code>, mithilfe der Kontrollpunkte mit den Koordinaten (<code>cp1x</code>, <code>cp1y</code>) und (<code>cp2x</code>, <code>cp2y</code>).</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/223/Canvas_curves.png" style="float: right; height: 190px; width: 190px;">Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.</p> + +<p>Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.</p> + +<h4 id="Quadratische_Bézierkurven">Quadratische Bézierkurven</h4> + +<p>Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Quadratric curves example + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100); + ctx.quadraticCurveTo(125, 100, 125, 62.5); + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); + } +}</code></pre> + +<p>{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}</p> + +<h4 id="Kubische_Bézierkurven">Kubische Bézierkurven</h4> + +<p>Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + // Cubic curves example + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); + } +}</code></pre> + +<p>{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}</p> + +<h3 id="Rechtecke">Rechtecke</h3> + +<p>Es gibt auch eine Rechtecksmethode für Pfade:</p> + +<dl> + <dt><code>rect(<em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt> + <dd>Zeichnet ein Rechteck.</dd> +</dl> + +<p>Nachdem diese Methode ausgeführt wurde, wird automatisch <code>moveTo(0, 0)</code> ausgeführt.</p> + +<h3 id="Kombinationen">Kombinationen</h3> + +<p>Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre><code>function draw() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + roundedRect(ctx, 12, 12, 150, 150, 15); + roundedRect(ctx, 19, 19, 150, 150, 9); + roundedRect(ctx, 53, 53, 49, 33, 10); + roundedRect(ctx, 53, 119, 49, 16, 6); + roundedRect(ctx, 135, 53, 49, 33, 10); + roundedRect(ctx, 135, 119, 25, 49, 10); + + ctx.beginPath(); + ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false); + ctx.lineTo(31, 37); + ctx.fill(); + + for (var i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 35, 4, 4); + } + + for (i = 0; i < 6; i++) { + ctx.fillRect(115, 51 + i * 16, 4, 4); + } + + for (i = 0; i < 8; i++) { + ctx.fillRect(51 + i * 16, 99, 4, 4); + } + + ctx.beginPath(); + ctx.moveTo(83, 116); + ctx.lineTo(83, 102); + ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); + ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); + ctx.lineTo(111, 116); + ctx.lineTo(106.333, 111.333); + ctx.lineTo(101.666, 116); + ctx.lineTo(97, 111.333); + ctx.lineTo(92.333, 116); + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = 'white'; + ctx.beginPath(); + ctx.moveTo(91, 96); + ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); + ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); + ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); + ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); + ctx.moveTo(103, 96); + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); + ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); + ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); + ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); + ctx.fill(); + + ctx.fillStyle = 'black'; + ctx.beginPath(); + ctx.arc(101, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } +} + +// A utility function to draw a rectangle with rounded corners. + +function roundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.arcTo(x, y + height, x + radius, y + height, radius); + ctx.lineTo(x + width - radius, y + height); + ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius); + ctx.lineTo(x + width, y + radius); + ctx.arcTo(x + width, y, x + width - radius, y, radius); + ctx.lineTo(x + radius, y); + ctx.arcTo(x, y, x, y + radius, radius); + ctx.stroke(); +}</code></pre> + +<div id="section_18"> +<p>Demo:</p> + +<p>{{EmbedLiveSample("Kombinationen", 160, 160)}}</p> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}</p> +</div> +</div> diff --git a/files/de/web/api/canvas_api/tutorial/drawing_text/index.html b/files/de/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..1cd3f0bfc6 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,165 @@ +--- +title: Text zeichnen +slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text +tags: + - Canvas + - Fortgeschritten + - Grafik + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</div> + +<div class="summary"> +<p>Nachdem wir im vorigen Kapitel gesehen haben, wie man <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Gestaltung und Farben anwendet</a> , werden wir nun einen Blick darauf werfen, wie man Text auf ein <code>canvas</code> zeichnet.</p> +</div> + +<h2 id="Text_zeichnen">Text zeichnen</h2> + +<p>Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}</dt> + <dd>Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}</dt> + <dd>Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.</dd> +</dl> + +<h3 id="ein_fillText-Beispiel">ein <code>fillText</code>-Beispiel</h3> + +<p>Der Text wird mit dem aktuellen <code>fillStyle</code> gefüllt.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.fillText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_fillText_example", 310, 110)}}</p> + +<h3 id="ein_strokeText-Beispiel">ein <code>strokeText</code>-Beispiel</h3> + +<p>Der Text wird mit dem aktuellen <code>strokeStyle</code> umrandet.</p> + +<pre class="brush: js;highlight[4]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + ctx.font = '48px serif'; + ctx.strokeText('Hello world', 10, 50); +}</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="300" height="100"></canvas></pre> + +<pre class="brush: js">draw();</pre> +</div> + +<p>{{EmbedLiveSample("A_strokeText_example", 310, 110)}}</p> + +<h2 id="Text_gestalten">Text gestalten</h2> + +<p>In den obigen Beispielen nutzen wir bereits die <code>font</code>-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem <code>canvas</code> zu beeinflussen:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font", "font = value")}}</dt> + <dd>Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die <a href="/en-US/docs/Web/CSS">CSS</a> {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}</dt> + <dd>Einstellung der Text-Ausrichtung. Mögliche Werte: <code>start</code>, <code>end</code>, <code>left</code>, <code>right</code> oder <code>center</code>. Der Standard-Wert ist <code>start</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}</dt> + <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code>, <code>ideographic</code>, <code>bottom</code>. The default value is <code>alphabetic</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}</dt> + <dd>Directionality. Possible values: <code>ltr</code>, <code>rtl</code>, <code>inherit</code>. The default value is <code>inherit</code>.</dd> +</dl> + +<p>These properties might be familiar to you, if you have worked with CSS before.</p> + +<p>The following diagram from the <a class="external" href="http://www.whatwg.org/" title="http://www.whatwg.org/">WHATWG</a> demonstrates the various baselines supported by the <code>textBaseline</code> property.<img alt="The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square." src="http://www.whatwg.org/specs/web-apps/current-work/images/baselines.png"></p> + +<h3 id="A_textBaseline_example">A textBaseline example</h3> + +<p>Edit the code below and see your changes update live in the canvas:</p> + +<pre class="brush: js;highlight[2]">ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.textBaseline = "hanging"; +ctx.strokeText("Hello world", 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Advanced_text_measurements">Advanced text measurements</h2> + +<p>In the case you need to obtain more details about the text, the following method allows you to measure it.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}</dt> + <dd>Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.</dd> +</dl> + +<p>The following code snippet shows how you can measure a text and get its width.</p> + +<pre class="brush: js;highlight[3]">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var text = ctx.measureText('foo'); // TextMetrics object + text.width; // 16; +} +</pre> + +<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> + +<p>In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#Prefixed_APIs">prefixed APIs</a> were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.</p> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/index.html b/files/de/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..487f5b7984 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,51 @@ +--- +title: Canvas Tutorial +slug: Web/Guide/HTML/Canvas_Tutorial +translation_of: Web/API/Canvas_API/Tutorial +--- +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><img alt="" src="https://mdn.mozillademos.org/files/257/Canvas_tut_examples.jpg" style="float: right; height: 450px; width: 200px;"></a></p> + +<p><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas"><strong><code><canvas></code></strong></a> ("Leinwand") ist ein <a href="/en-US/docs/HTML" title="HTML">HTML</a> Element, auf das man mit Hilfe von Skripten (normalerweise <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a>) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <code><canvas></code>-Element erstellen lassen.</p> + +<p><code>Das <canvas>-</code>Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. <a href="/en-US/docs/Gecko" title="Gecko">Gecko</a> 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <code><canvas></code>-Element ist Teil der <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> Spezifikation (HTML5).</p> + +<p><span class="seoSummary">Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.</span></p> + +<h2 id="Before_you_start" name="Before_you_start">Vorbereitung</h2> + +<p>Das <code><canvas></code>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von <a href="/de/docs/HTML" title="HTML">HTML</a> und <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a> voraus. Einige ältere Browser unterstützen das <code><canvas></code>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute <code>height</code> und <code>width</code> oder mit Hilfe von <a href="/de/docs/CSS" title="HTML">CSS</a> ändern. Um auf dem <code><canvas></code>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".</p> + +<h2 id="In_this_tutorial" name="In_this_tutorial">In diesem Tutorial</h2> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen" title="Canvas_tutorial/Basic_usage">Grundlagen</a></li> + <li><a href="https://developer.mozilla.org/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen" title="Canvas_tutorial/Drawing_shapes">Formen zeichnen</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images" title="Canvas_tutorial/Using_images">Bilder</a></li> + <li><a href="/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors" title="Canvas_tutorial/Applying_styles_and_colors">Stile und Farben verwenden</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Transformations" title="Canvas_tutorial/Transformations">Transformations</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing" title="Canvas_tutorial/Compositing">Compositing</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations" title="Canvas_tutorial/Basic_animations">Basic animations</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas">Optimizing the canvas</a></li> +</ul> + +<h2 id="See_also" name="See_also">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li> + <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="Drawing_Graphics_with_Canvas">Drawing Graphics with Canvas</a></li> + <li><a href="/en-US/docs/tag/Canvas_examples" title="tag/Canvas_examples">Canvas examples</a></li> + <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li> + <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="Drawing_text_using_a_canvas">Drawing Text Using a Canvas</a></li> + <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="Adding Text to Canvas">Adding Text to Canvas</a></li> + <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Canvas Drawing and Animation Application</a></li> + <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">Interactive canvas tutorial</a></li> + <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet with all attributes and methods</a></li> + <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator to Canvas plug-in</a></li> + <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5CanvasTutorials</a></li> + <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">How to draw N grade Bézier curves with the Canvas API</a></li> + <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">31 days of canvas tutorials</a></li> + <li><a href="http://www.w3.org/TR/2dcontext/" title="http://www.w3.org/TR/2dcontext/">W3C Standard</a></li> + <li><a href="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php" title="http://www.tutorialspark.com/html5/HTML5_canvas_Intro.php">HTML5 Canvas tutorials and reference</a></li> +</ul> + +<div>{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}</div> diff --git a/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..fc1678c71a --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,118 @@ +--- +title: Canvas optimieren +slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren +tags: + - Canvas + - Fortgeschritten + - Grafik + - HTML + - HTML5 + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</div> + +<div class="summary"> +<p>Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. <span class="seoSummary">Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.</span></p> +</div> + +<h2 id="Tipps_zur_Performance">Tipps zur Performance</h2> + +<p>Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.</p> + +<h3 id="Vorrendern_von_ähnlichen_oder_sich_wiederholenden_Objekten_auf_einem_Offscreen-Canvas">Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas</h3> + +<p>Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.</p> + +<pre class="brush: js">myEntity.offscreenCanvas = document.createElement('canvas'); +myEntity.offscreenCanvas.width = myEntity.width; +myEntity.offscreenCanvas.height = myEntity.height; +myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d'); + +myEntity.render(myEntity.offscreenContext); +</pre> + +<h3 id="Vermeiden_Sie_Gleitkomma-Koordinaten">Vermeiden Sie Gleitkomma-Koordinaten</h3> + +<p>Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.</p> + +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); +</pre> + +<p>Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}</span> runden, zum Beispiel mit Hilfe von <span style='background-color: transparent; color: #333333; display: inline !important; float: none; font-family: "Open Sans",arial,x-locale-body,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;'>{{jsxref("Math.floor()")}}.</span></p> + +<h3 id="Skalieren_Sie_keine_Bilder_in_drawImage">Skalieren Sie keine Bilder in <code>drawImage</code></h3> + +<p>Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.</p> + +<h3 id="Benutzen_Sie_mehrere_Canvas-Ebenen_für_komplexe_Szenen">Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen</h3> + +<p>Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.</p> + +<p>Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.</p> + +<pre class="brush: html"><div id="stage"> + <canvas id="ui-layer" width="480" height="320"></canvas> + <canvas id="game-layer" width="480" height="320"></canvas> + <canvas id="background-layer" width="480" height="320"></canvas> +</div> + +<style> + #stage { + width: 480px; + height: 320px; + position: relative; + border: 2px solid black + } + canvas { position: absolute; } + #ui-layer { z-index: 3 } + #game-layer { z-index: 2 } + #background-layer { z-index: 1 } +</style> +</pre> + +<h3 id="Nutzen_Sie_CSS_für_große_Hintergrundbilder">Nutzen Sie CSS für große Hintergrundbilder</h3> + +<p>Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.</p> + +<h3 id="Skalieren_Sie_das_Canvas_mit_CSS-Transformationen">Skalieren Sie das Canvas mit CSS-Transformationen</h3> + +<p><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">CSS-Transformationen</a> sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.</p> + +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; +var scaleY = window.innerHeight / canvas.height; + +var scaleToFit = Math.min(scaleX, scaleY); +var scaleToCover = Math.max(scaleX, scaleY); + +stage.style.transformOrigin = '0 0'; //scale from top left +stage.style.transform = 'scale(' + scaleToFit + ')'; +</pre> + +<h3 id="Nutzen_Sie_das_moz-opaque_Attribut_(nur_Gecko)">Nutzen Sie das <code>moz-opaque</code> Attribut (nur Gecko)</h3> + +<p>Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das <code>moz-opaque</code> Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.</p> + +<pre class="brush: html"><canvas id="myCanvas" moz-opaque></canvas></pre> + +<h3 id="Weitere_Tipps">Weitere Tipps</h3> + +<ul> + <li>Bündeln Sie Canvas-Aufrufe (Zeichnen Sie zum Beispiel eine Linie mit mehreren Knotenpunkten, anstatt einzelne Linien).</li> + <li>Vermeiden Sie unnötige Zustandsänderungen des Canvas.</li> + <li>Rendern Sie nur die Unterschiede, nicht den ganzen neuen Zustand.</li> + <li>Vermeiden Sie die {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}-Eigenschaft, soweit möglich.</li> + <li>Vermeiden Sie <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text">das Zeichnen von Text</a>, falls möglich.</li> + <li>Versuchen Sie verschiedene Wege, das Canvas zu leeren ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}, {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} oder Größenänderung des Canvas)</li> + <li>Bei Animationen, nutzen Sie {{domxref("window.requestAnimationFrame()")}} anstatt {{domxref("window.setInterval()")}} .</li> + <li>Seien Sie vorsichtig mit schwergewichtigen Physik-Bibliotheken.</li> +</ul> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-ref">Improving HTML5 Canvas Performance – HTML5 Rocks</a></li> + <li><a href="https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/">Optimizing your JavaScript game for Firefox OS – Mozilla Hacks</a></li> +</ul> + +<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}</p> diff --git a/files/de/web/api/canvas_api/tutorial/using_images/index.html b/files/de/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..b636807f97 --- /dev/null +++ b/files/de/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,324 @@ +--- +title: Bilder +slug: Web/Guide/HTML/Canvas_Tutorial/Bilder +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +<p>{{CanvasSidebar}}</p> + +<p>Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.</p> + +<p>Um Bilder zu importieren bedarf es bloß zwei Schritte:</p> + +<ol> + <li>Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.</li> + <li>Das Bild mithilfe der <code>drawImage()</code> Funktion zeichnen.</li> +</ol> + +<h2 id="Bilder_importieren">Bilder importieren</h2> + +<p>Die canvas API unterstützt folgende Typen als Bilder:</p> + +<dl> + <dt>{{domxref("HTMLImageElement")}}</dt> + <dd>Diese Bilder können mithilfe des <code>Image()</code> Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.</dd> + <dt>{{domxref("HTMLVideoElement")}}</dt> + <dd>Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.</dd> + <dt>{{domxref("HTMLCanvasElement")}}</dt> + <dd>Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.</dd> + <dt>{{domxref("ImageBitmap")}}</dt> + <dd>Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.</dd> +</dl> + +<p>These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.</p> + +<p>There are several ways to get images for use on a canvas.</p> + +<h3 id="Bilder_von_derselben_Seite">Bilder von derselben Seite</h3> + +<p>Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:</p> + +<ul> + <li>Die {{domxref("document.images")}} Sammlung</li> + <li>Die {{domxref("document.getElementsByTagName()")}} Methode</li> + <li>Die {{domxref("document.getElementById()")}} Methode, wenn eine Id festgelegt worden ist</li> +</ul> + +<h3 id="Bilder_von_anderen_Seiten_nutzen">Bilder von anderen Seiten nutzen</h3> + +<p>Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image#What_is_a_.22tainted.22_canvas.3F">"getaintes Canvas"</a>.</p> + +<h3 id="Andere_Canvas_Elemente_benutzen">Andere Canvas Elemente benutzen</h3> + +<p>Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.</p> + +<p>Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.</p> + +<p>Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.</p> + +<h3 id="Ein_Bild_von_Grund_auf">Ein Bild von Grund auf</h3> + +<p>Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den <code>Image()</code>-Konstruktor verwenden:</p> + +<pre class="brush: js"><code>var img = new Image(); // Erstelle neues Image-Objekt +img.src = 'myImage.png'; // Setze den Pfad zum Bild</code></pre> + +<p>Wird dieses Skript ausgeführt, fängt das Bild an zu laden.</p> + +<div class="note"> +<p><strong>Achtung</strong>: Wenn <code>drawImage()</code> vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.</p> +</div> + +<pre class="brush: js"><code>var img = new Image(); // Erstelle neues Image-Objekt +img.addEventListener("load", function() { + // füge hier den drawImage()-Befehl ein +}, false); +img.src = 'myImage.png'; // Setze den Pfad zum Bild +</code></pre> + +<p>Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir <a href="http://www.webreference.com/programming/javascript/gr/column3/">JavaScript Image Preloader</a> angucken (ist leder auf Englisch).</p> + +<h3 id="Embedding_an_image_via_data_URL">Embedding an image via data: URL</h3> + +<p>Another possible way to include images is via the <a class="external" href="/en-US/docs/data_URIs" rel="external" title="http://en.wikipedia.org/wiki/Data:_URL">data: url</a>. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.</p> + +<pre class="brush: js">var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw=='; +</pre> + +<p>One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>, <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a>, and images, making it more portable to other locations.</p> + +<p>Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.</p> + +<h3 id="Using_frames_from_a_video">Using frames from a video</h3> + +<p>You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:</p> + +<pre class="brush: js">function getMyVideo() { + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + return document.getElementById('myvideo'); + } +} +</pre> + +<p>This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a <code>CanvasImageSource</code>.</p> + +<h2 id="Drawing_images">Drawing images</h2> + +<p>Once we have a reference to our source image object we can use the <code>drawImage()</code> method to render it to the canvas. As we will see later the <code>drawImage()</code> method is overloaded and has several variants. In its most basic form it looks like this:</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>)</code></dt> + <dd>Draws the <code>CanvasImageSource</code> specified by the <code>image</code> parameter at the coordinates (<code>x</code>, <code>y</code>).</dd> +</dl> + +<h3 id="Example_A_simple_line_graph">Example: A simple line graph</h3> + +<p>In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's <code>load</code> event handler to execute the drawing statements. The <code>drawImage()</code> method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.</p> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="180" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function(){ + ctx.drawImage(img,0,0); + ctx.beginPath(); + ctx.moveTo(30,96); + ctx.lineTo(70,66); + ctx.lineTo(103,76); + ctx.lineTo(170,15); + ctx.stroke(); + }; + img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; +}</pre> + +<p>The resulting graph looks like this:</p> + +<p>{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}</p> + +<h2 id="Scaling">Scaling</h2> + +<p>The second variant of the <code>drawImage()</code> method adds two new parameters and lets us place scaled images on the canvas.</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>x</em>, <em>y</em>, <em>width</em>, <em>height</em>)</code></dt> + <dd>This adds the <code>width</code> and <code>height</code> parameters, which indicate the size to which to scale the image when drawing it onto the canvas.</dd> +</dl> + +<h3 id="Example_Tiling_an_image">Example: Tiling an image</h3> + +<p>In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first <code>for</code> loop iterates over the rows. The second <code>for</code> loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.</p> + +<div class="note"> +<p><strong>Note</strong>: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.</p> +</div> + +<div class="hidden"> +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> +</html> +</pre> +</div> + +<pre class="brush: js">function draw() { + var ctx = document.getElementById('canvas').getContext('2d'); + var img = new Image(); + img.onload = function(){ + for (var i=0;i<4;i++){ + for (var j=0;j<3;j++){ + ctx.drawImage(img,j*50,i*38,50,38); + } + } + }; + img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; +}</pre> + +<p>The resulting canvas looks like this:</p> + +<p>{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}</p> + +<h2 id="Slicing">Slicing</h2> + +<p>The third and last variant of the <code>drawImage()</code> method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.</p> + +<dl> + <dt><code>drawImage(<em>image</em>, <em>sx</em>, <em>sy</em>, <em>sWidth</em>, <em>sHeight</em>, <em>dx</em>, <em>dy</em>, <em>dWidth</em>, <em>dHeight</em>)</code></dt> + <dd>Given an <code>image</code>, this function takes the area of the source image specified by the rectangle whose top-left corner is (<code>sx</code>, <code>sy</code>) and whose width and height are <code>sWidth</code> and <code>sHeight</code> and draws it into the canvas, placing it on the canvas at (<code>dx</code>, <code>dy</code>) and scaling it to the size specified by <code>dWidth</code> and <code>dHeight</code>.</dd> +</dl> + +<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right; height: 290px; width: 300px;">To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.</p> + +<p>Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.</p> + +<h3 id="Example_Framing_an_image">Example: Framing an image</h3> + +<p>In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + <div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </div> + </body> +</html> +</pre> + +<pre class="brush: js">function draw() { + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + + // Draw slice + ctx.drawImage(document.getElementById('source'), + 33, 71, 104, 124, 21, 20, 87, 104); + + // Draw frame + ctx.drawImage(document.getElementById('frame'),0,0); +}</pre> + +<p>We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.</p> + +<p>{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}</p> + +<p>The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use <code>drawImage()</code> to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second <code>drawImage()</code> call.</p> + +<h2 id="Art_gallery_example">Art gallery example</h2> + +<p>In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}} element is inserted for each image and a frame is drawn arround it.</p> + +<p>In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.</p> + +<p>The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. <code>insertBefore()</code> is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).</p> + +<pre class="brush: html"><html> + <body onload="draw();"> + <table> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td> + </tr> + <tr> + <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td> + <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td> + </tr> + </table> + <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150"> + </body> +</html> +</pre> + +<p>And here's some CSS to make things look nice:</p> + +<pre class="brush: css">body { + background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A; + margin: 10px; +} + +img { + display: none; +} + +table { + margin: 0 auto; +} + +td { + padding: 15px; +} +</pre> + +<p>Tying it all together is the JavaScript to draw our framed images:</p> + +<pre class="brush: js">function draw() { + + // Loop through all images + for (var i=0;i<document.images.length;i++){ + + // Don't add a canvas for the frame image + if (document.images[i].getAttribute('id')!='frame'){ + + // Create canvas element + canvas = document.createElement('canvas'); + canvas.setAttribute('width',132); + canvas.setAttribute('height',150); + + // Insert before the image + document.images[i].parentNode.insertBefore(canvas,document.images[i]); + + ctx = canvas.getContext('2d'); + + // Draw image to canvas + ctx.drawImage(document.images[i],15,20); + + // Add frame + ctx.drawImage(document.getElementById('frame'),0,0); + } + } +}</pre> + +<p>{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}</p> + +<h2 id="Controlling_image_scaling_behavior">Controlling image scaling behavior</h2> + +<p>As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is <code>true</code>, meaning images will be smoothed when scaled. You can disable this feature like this:</p> + +<pre class="js">ctx.mozImageSmoothingEnabled = false; +</pre> + +<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}</p> diff --git a/files/de/web/api/document/readystatechange_event/index.html b/files/de/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..9fba4b5dee --- /dev/null +++ b/files/de/web/api/document/readystatechange_event/index.html @@ -0,0 +1,86 @@ +--- +title: readystatechange +slug: Web/Events/readystatechange +tags: + - Referenz + - XMLHttpRequest +translation_of: Web/API/Document/readystatechange_event +--- +<p>{{ApiRef}}</p> + +<p>Das Ereignis <code>readystatechange</code> wird ausgelöst, wenn sich die Eigenschaft <a href="/en-US/docs/DOM/document.readyState"><code>readyState</code></a> eines Dokumentes verändert hat.</p> + +<h2 id="Allgemeine_Information">Allgemeine Information</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#current-document-readiness">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Aufsteigend</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Abbrechbar</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Dokument</dd> + <dt style="float: left; text-align: right; width: 120px;">Standardaktion</dt> + <dd style="margin: 0 0 0 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: js">// als Alternative zu DOMContentLoaded +document.onreadystatechange = function () { + if (document.readyState == "interactive") { + initApplication(); + } +} +</pre> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>Dieses Ereignis wird vom Internet Explorer schon sehr lange unterstützt und kann daher als Alternative zum <a href="/en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event)"><code>DOMContentLoaded</code></a>-Ereignis genutzt werden (vgl. Anmerkung [2] im Abschnitt <a href="/de/docs/Web/Events/DOMContentLoaded#Browserkompatibilität">Browserkompatibilität</a>).</p> + +<h2 id="Verwandte_Ereignisse">Verwandte Ereignisse</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/de/web/api/document_object_model/index.html b/files/de/web/api/document_object_model/index.html new file mode 100644 index 0000000000..a16a254129 --- /dev/null +++ b/files/de/web/api/document_object_model/index.html @@ -0,0 +1,66 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +<div class="callout-box"><strong><a href="/de/docs/Verwendung_des_W3C_DOM_Level_1" title="Verwendung des W3C DOM Level 1">Verwendung des W3C DOM Level 1</a></strong><br> +Einführung in das W3C DOM.</div> + +<p>Das <strong>Document Object Model</strong> (<strong>DOM</strong>) ist eine Programmierschnittstelle für <a href="/de/docs/HTML" title="HTML">HTML</a>- und <a href="/de/docs/XML" title="XML">XML</a>-Dokumente. Sie bildet die strukturelle Abbildung des Dokuments und ermöglicht Skripten die Veränderung des Inhalts und dessen Präsentation.</p> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Dokumentation">Dokumentation</h2> + + <dl> + <dt><a href="/de/docs/Gecko-DOM-Referenz" title="Gecko-DOM-Referenz">Gecko DOM Referenz</a></dt> + <dd>Die Gecko <em>Document Object Model</em> Referenz.</dd> + <dt><a href="/de/docs/DOM/Ueber_das_Document_Object_Model" title="Über_das_Document_Object_Model">Über das Document Object Model</a></dt> + <dd>Eine kleine Einführung ins DOM.</dd> + <dt><a href="/de/docs/Das_DOM_und_JavaScript" title="Das_DOM_und_JavaScript">Das DOM und JavaScript</a></dt> + <dd>Was ist das DOM? Was ist JavaScript? Wie kann ich diese Techniken zusammen benutzen? Dieses Dokument beantwortet diese und weitere Fragen.</dd> + <dt><a href="/de/docs/DOM/Verwendung_von_dynamischen_Styles">Verwendung von dynamischen Styles</a></dt> + <dd>Wie man Style-Informationen mittels DOM erhalten und verändern kann.</dd> + <dt><a href="/de/docs/Das_XUL-Interface_dynamisch_verändern" title="Das_XUL-Interface_dynamisch_verändern">Das XUL-Interface dynamisch verändern</a></dt> + <dd>Die Grundlagen zum Manipulieren des XUL-UI mit DOM Methoden.</dd> + <dt><a href="/de/docs/Größe_von_Elementen_bestimmen" title="Größe_von_Elementen_bestimmen">Größe von Elementen bestimmen</a></dt> + <dd><small>Dieser Artikel beschreibt, wie man den richtigen Größen von Elementen finden kann.</small></dd> + <dt><a class="external" href="http://www.mozilla.org/docs/dom/">Das Document Object Model in Mozilla</a> (engl.)</dt> + <dd>Eine ältere Dokumentation über das DOM, auf mozilla.org.</dd> + </dl> + + <p><span class="alllinks"><a href="/de/docs/tag/DOM" title="de/docs/tag/DOM">Alle zeigen...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community">Community</h2> + + <ul> + <li>Mozillas DOM Foren:{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}</li> + </ul> + + <h2 class="Tools" id="Tools" name="Tools">Tools</h2> + + <ul> + <li><a class="external" href="http://www.getfirebug.com/">Firebug </a></li> + <li><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></li> + <li><a class="external" href="http://slayeroffice.com/tools/modi/v2.0/modi_help.html">Mouse-over DOM Inspector</a></li> + <li><a class="external" href="http://www.karmatics.com/aardvark/">Aardvark Firefox extension</a></li> + <li><a href="/de/docs/tag/DOM:Tools" title="de/docs/tag/DOM:Tools">weitere...</a></li> + </ul> + + <h2 class="Related_Topics" id="Verwandte_Themen" name="Verwandte_Themen">Verwandte Themen</h2> + + <ul> + <li><a href="/de/docs/AJAX" title="AJAX">AJAX</a>, <a href="/de/docs/CSS" title="CSS">CSS</a>, <a href="/de/docs/DHTML" title="DHTML">DHTML</a>, <a href="/de/docs/JavaScript" title="JavaScript">JavaScript</a></li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/type/index.html index 28c57a4cb1..28c57a4cb1 100644 --- a/files/de/web/api/file/typ/index.html +++ b/files/de/web/api/file/type/index.html diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/using_files_from_web_applications/index.html index c44ac4b9df..c44ac4b9df 100644 --- a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html +++ b/files/de/web/api/file/using_files_from_web_applications/index.html diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/fullscreen_api/index.html index 1ddce4c572..1ddce4c572 100644 --- a/files/de/web/api/vollbild_api/index.html +++ b/files/de/web/api/fullscreen_api/index.html diff --git a/files/de/web/api/geolocation_api/index.html b/files/de/web/api/geolocation_api/index.html new file mode 100644 index 0000000000..65be452a5a --- /dev/null +++ b/files/de/web/api/geolocation_api/index.html @@ -0,0 +1,291 @@ +--- +title: Verwenden von geolocation +slug: Web/WebAPI/verwenden_von_geolocation +translation_of: Web/API/Geolocation_API +--- +<p>Die <strong>"geolocation"-API</strong> ermöglicht es Nutzern, einer Web-Applikation die eigene Position mitzuteilen. Um die Privatsphäre des Nutzers zu schützen, wird dieser vorher um Erlaubnis gebeten und muss der Übermittlung zustimmen.</p> + +<h2 id="Das_geolocation-Objekt">Das geolocation-Objekt</h2> + +<p>Die geolocation-API wird durch das {{domxref("window.navigator.geolocation","navigator.geolocation")}}-Objekt offengelegt.</p> + +<p>Wenn das Objekt existiert, sind die geolocation-Services vorhanden und nutzbar. Sie können die Funktionstüchtigkeit daher wie folgt testen:</p> + +<pre class="brush: js">if ("geolocation" in navigator) { + /* geolocation funktioniert */ +} else { + /* geolocation funktioniert NICHT */ +} +</pre> + +<div class="note"> +<p><strong>Notiz:</strong> In Firefox 24 und älteren Versionen hat <code>"geolocation" in navigator</code> immer true zurückgegeben, auch wenn die API ausgeschaltet war. Dies wurde mit <a href="/en-US/docs/Mozilla/Firefox/Releases/25/Site_Compatibility">Firefox 25</a> gelöst um mit dem Standard kompatibel zu sein. ({{ bug(884921) }})</p> +</div> + +<h3 id="Die_derzeitige_Position_abfragen">Die derzeitige Position abfragen</h3> + +<p>Um die derzeitige Position des Nutzers zu erhalten, können Sie die Methode {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} aufrufen. Dies startet eine asynchrone Anfrage für den Abruf der Position zu initiieren. Wenn die Position erhalten wurde, wird die übergebene Callback-Funktion ausgeführt. Sie können optional auch eine zweite Callback-Funktion übergeben, welche im Falle eines Fehlers ausgeführt wird. Ein dritter, optionaler Parameter ist ein Konfigurationsobjekt, in dem Sie das maximale Alter der zurückgegeben Position, die maximale Wartezeit für die Anfrage und den Wunsch für eine hohe Genauigkeit festlegegen können.</p> + +<div class="note"> +<p><strong>Notiz:</strong> Standardmäßig versucht {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} so schnell wie möglich mit einer geringen Genauigkeit zu antworten. Es ist nützlich wenn Sie eine schnelle Antwort benötigen, unabhängig von der Genauigkeit. Beispielsweise Geräte mit einem GPS können eine Minute oder länger benötigen um eine neue Position zu erhalten, also kann es möglich sein, dass weniger genaue Daten (Ort der IP oder von WLANs) zurückgegeben werden.</p> +</div> + +<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>Das obige Beispiel wird die Funktion <code>do_something()</code> ausführen, wenn eine Position erhalten wurde.</p> + +<h3 id="Die_derzeitige_Position_überwachen">Die derzeitige Position überwachen</h3> + +<p>Wenn sich die Positionsdaten ändern (entweder über die Bewegung des Gerätes oder den Erhalt genauere Geolokationsdaten), können Sie eine Callback-Funktion erstellen, die mit der erneuerten Positionsinformation arbeitet. Dies ist über die Funktion {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} möglich, welche die gleichen Eingabeparameter wie {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}. besitzt. Die Callback-Funktion wird mehrere Male ausgeführt, dies erlaubt dem Browser die Position aufgrund von Bewegungen oder genaueren Positionsdaten, durch das Verwenden von anderen (langsameren) Methoden, zu erneuern. Die Fehler-Callback-Funktion, welche wie auch in {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}}, hier optional ist, kann auch mehrfach aufgerufen werden.</p> + +<div class="note"> +<p><strong>Notiz:</strong> Sie können {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} auch ohne ein vorangestellten Aufruf von {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} nutzen.</p> +</div> + +<pre class="brush: js">var watchID = navigator.geolocation.watchPosition(function(position) { + do_something(position.coords.latitude, position.coords.longitude); +});</pre> + +<p>Die Methode {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} gibt eine numerische ID zurück, die für die eindeutige Identifikation des Positionsüberwachers verwendet werden kann; diese können Sie in der Methode {{domxref("window.navigator.geolocation.clearWatch()","clearWatch()")}} nutzen, um die Positionsüberwachung zu beenden.</p> + +<pre class="brush: js">navigator.geolocation.clearWatch(watchID); +</pre> + +<h3 id="Anpassen_der_Antwort">Anpassen der Antwort</h3> + +<p>Sowohl {{domxref("window.navigator.geolocation.getCurrentPosition()","getCurrentPosition()")}} als auch {{domxref("window.navigator.geolocation.watchPosition()","watchPosition()")}} nehmen einen Erfolgs-Callback an, einen optionalen Fehler-Callback und ein optionales <code>PositionOptions</code>-Objekt.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionOptions")}}</p> + +<p>Ein Aufruf von {{domxref("window.navigator.geolocation.watchPosition()","watchPosition")}} könnte wie folgt aussehen:</p> + +<pre class="brush: js">function geo_success(position) { + do_something(position.coords.latitude, position.coords.longitude); +} + +function geo_error() { + alert("Entschuldigung, keine Positionsinformationen sind verfügbar."); +} + +var geo_options = { + enableHighAccuracy: true, + maximumAge : 30000, + timeout : 27000 +}; + +var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);</pre> + +<p><a id="fck_paste_padding">Ein (englisches) Beispiel von watchPosition in Aktion: </a><a class="external" href="http://www.thedotproduct.org/experiments/geo/">http://www.thedotproduct.org/experiments/geo/</a><br> + <a id="fck_paste_padding"></a></p> + +<h2 id="Darstellung_einer_Position">Darstellung einer Position</h2> + +<p>Die Position des Nutzers wird durch ein <code>Position</code>-Objekt dargestellt, welches ein <code>Coordinates</code>-Objekt referenziert.</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Position")}}</p> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","Coordinates")}}</p> + +<h2 id="Fehlerbehandlung">Fehlerbehandlung</h2> + +<p>Die Fehler-Callback-Funktion, wenn im Aufruf von <code>getCurrentPosition()</code> oder <code>watchPosition()</code> vorhanden, nimmt ein PositionError-Objekt als ersten Parameter an.</p> + +<pre class="brush: js">function errorCallback(error) { + alert('ERROR(' + error.code + '): ' + error.message); +}; +</pre> + +<p>{{page("/en-US/docs/DOM/window.navigator.geolocation.getCurrentPosition","PositionError")}}</p> + +<h2 id="Geolokations-Live-Beispiel">Geolokations-Live-Beispiel</h2> + +<div class="hidden"> +<pre class="brush: css">body { + padding: 20px; + background-color:#ffffc9 +} + +p { margin : 0; } +</pre> +</div> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html;"><p><button onclick="geoFindMe()">Zeige meine Position an</button></p> +<div id="out"></div> +</pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js;">function geoFindMe() { + var output = document.getElementById("out"); + + if (!navigator.geolocation){ + output.innerHTML = "<p>Geolokation wird von ihrem Browser nicht unterstützt</p>"; + return; + } + + function success(position) { + var latitude = position.coords.latitude; + var longitude = position.coords.longitude; + + output.innerHTML = '<p>Die Latitude ist ' + latitude + '° <br>Die Longitude ist ' + longitude + '°</p>'; + + var img = new Image(); + img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false"; + + output.appendChild(img); + }; + + function error() { + output.innerHTML = "Es war nicht möglich Sie zu lokalisieren"; + }; + + output.innerHTML = "<p>Lokalisieren…</p>"; + + navigator.geolocation.getCurrentPosition(success, error); +} +</pre> + +<h3 id="Demo">Demo:</h3> + +<p>{{ EmbedLiveSample('Geolokations-Live-Beispiel',350,410) }}</p> + +<h2 id="Für_die_Erlaubnis_fragen">Für die Erlaubnis fragen</h2> + +<p>Jedes Add-On von addons.mozilla.org, welches dieses Feature nutzt, muss explizit, ähnlich der automatischen Frage von Websites, nach Erlaubnis fragen. Die Antwort des Nutzers wird in einer Konfiguration gespeichert, welche von <code>pref</code>-Parameter bestimmt wird, wenn möglich. Die Funktion, die als <code>callback</code>-Parameter verwendet wird mit einem boolischen Wert aufgerufen, welcher die Antwort des Nutzers anzeigt. Wenn dieser <code>true</code> ist, kann das Add-On Geolokationsdaten nutzen.</p> + +<pre class="brush: js">function prompt(window, pref, message, callback) { + let branch = Components.classes["@mozilla.org/preferences-service;1"] + .getService(Components.interfaces.nsIPrefBranch); + + if (branch.getPrefType(pref) === branch.PREF_STRING) { + switch (branch.getCharPref(pref)) { + case "always": + return callback(true); + case "never": + return callback(false); + } + } + + let done = false; + + function remember(value, result) { + return function() { + done = true; + branch.setCharPref(pref, value); + callback(result); + } + } + + let self = window.PopupNotifications.show( + window.gBrowser.selectedBrowser, + "geolocation", + message, + "geo-notification-icon", + { + label: "Ort teilen", + accessKey: "S", + callback: function(notification) { + done = true; + callback(true); + } + }, [ + { + label: "Immer teilen", + accessKey: "A", + callback: remember("always", true) + }, + { + label: "Niemals teilen", + accessKey: "N", + callback: remember("never", false) + } + ], { + eventCallback: function(event) { + if (event === "dismissed") { + if (!done) callback(false); + done = true; + window.PopupNotifications.remove(self); + } + }, + persistWhileVisible: true + }); +} + +prompt(window, + "extensions.foo-addon.allowGeolocation", + "Foo Add-on möchte deinen Ort abrufen.", + function callback(allowed) { alert(allowed); }); +</pre> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{ CompatibilityTable() }}</div> + +<div> </div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Grundsätzlicher Support</td> + <td>5</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>9</td> + <td>10.60<br> + Removed in 15.0<br> + Reintroduced in 16.0</td> + <td>5</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Grundsätzlicher Support</td> + <td>2.1</td> + <td>11</td> + <td>{{CompatGeckoMobile("4")}}</td> + <td>10</td> + <td>10.60</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Gecko-Notizen">Gecko-Notizen</h3> + +<p>Firefox besitzt Support für das Lokalisieren über WLAN-Informationen durch die "Google Location"-Services. In einer Transaktion zwischen Firefox und Google werden die Daten übetragen, inklusive Daten des WLAN-Zugriffspunktes, einem Zugriffstoken (ähnlich wie ein zweiwöchiger Cookie), und der IP-Adresse des Nutzers. Für mehr Informationen sollten Sie <a href="http://www.mozilla.com/de/privacy/">Mozillas</a> und <a href="www.google.com/privacy/lsf.html">Googles</a> Datenschutzbestimmungen lesen, welche den Rahmen der Datennutzung angeben.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li>{{domxref("window.navigator.geolocation","navigator.geolocation")}}</li> + <li><a href="http://www.w3.org/TR/geolocation-API/" rel="external" title="http://www.w3.org/TR/geolocation-API/">Geolocation API auf w3.org</a></li> + <li><a href="/en-US/demos/tag/tech:geolocation" title="en-US/demos/tag/tech:geolocation/">Demos für die Geolokations-API</a></li> + <li><a href="https://hacks.mozilla.org/2013/10/who-moved-my-geolocation/">Who moved my geolocation?</a> (Hacks blog)</li> +</ul> diff --git a/files/de/web/api/history_api/index.html b/files/de/web/api/history_api/index.html new file mode 100644 index 0000000000..6f59cbbdc3 --- /dev/null +++ b/files/de/web/api/history_api/index.html @@ -0,0 +1,227 @@ +--- +title: Manipulieren des Browser-Verlaufes +slug: Web/Guide/DOM/Manipulating_the_browser_history +tags: + - Verlauf +translation_of: Web/API/History_API +--- +<p>Das DOM {{ domxref("window") }} Objekt stellt Zugriffsmöglichkeiten auf den Browser-Verlauf über das {{ domxref("window.history", "history") }} Objekt bereit. Es bietet nützliche Methoden und Einstellungen, die es ermöglichen, den Zurück- und Vorwärts-Button und den Browser-Verlauf zu steuern und – seit HTML5 – diesen auch zu manipulieren</p> + +<h2 id="Durch_den_Verlauf_gehen">Durch den Verlauf gehen</h2> + +<p>Um durch den Verlauf des Benutzers zu gehen gibt es die Methoden <code>back()</code>, <code>forward()</code> und <code>go()</code>.</p> + +<h3 id="Vor_und_zurück_bewegen">Vor und zurück bewegen</h3> + +<p>Um im Verlauf zurück zu navigieren, nutze:</p> + +<pre class="brush: js">window.history.back(); +</pre> + +<p>Dies hat denselben Effekt, wie wenn der Benutzer den Zurück-Knopf drückt.</p> + +<p>Auf ähnliche Weise kann so vorwärts navigiert werden: </p> + +<pre class="brush: js">window.history.forward(); +</pre> + +<h3 id="An_einen_bestimmten_Punkt_im_Verlauf_springen">An einen bestimmten Punkt im Verlauf springen</h3> + +<p>Mit der Methode <code>go()</code> ist es möglich, eine spezifische Seite aus dem Verlauf zu laden, welche relativ zur momentanen Seite im Verlauf steht. Die aktuelle Seite hat hierbei natürlich Index 0.</p> + +<p>Um eine Seite rückwärts zu gehen (äquivalent zu <code>back()</code>):</p> + +<pre class="brush: js"><code>window.history.go(-1);</code> +</pre> + +<p>Um eine Seite vorwärts zu gehen (äquivalent zu <code>forward()</code>):</p> + +<pre class="brush: js"><code>window.history.go(1);</code> +</pre> + +<p>Gleichermassen ist es möglich, 2 Seiten vorwärts mit <code>go(2)</code> zu gehen, 3 rückwärts mit <code>go(-3)</code> und so weiter.</p> + +<p>Die Anzahl der Seiten im history-Stapel kann mithilfe der Eigenschaft <code>length</code> bestimmt werden:</p> + +<pre class="brush: js">var <code>numberOfEntries</code> = window.history.length; +</pre> + +<div class="note"><strong>Anmerkung:</strong> Der Internet Explorer unterstützt das Übergeben von String URLs als Parameter für <code>go()</code>; dies ist nicht standardisiertes Verhalten und wird von Gecko nicht unterstützt.</div> + +<h2 id="Hinzufügen_und_Ändern_von_Verlaufseinträgen">Hinzufügen und Ändern von Verlaufseinträgen</h2> + +<p>{{ gecko_minversion_header("2") }}</p> + +<p>Mit HTML5 wurden die Methoden <code>history.pushState()</code> und <code>history.replaceState()</code> eingeführt, welche jeweils das Hinzufügen und die Manipulation von Verlaufseinträgen ermöglichen. Diese stehen in Verbindung mit dem {{ domxref("window.onpopstate") }}-Event.</p> + +<p>Wenn <code>history.pushState()</code> benutzt wird, ändert das den Referrer der als HTTP-Header in danach erstellten <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objekten genutzt wird. Der Referrer wird die URL des Dokumentes sein, dessen Fenster <code>this</code> zur Zeit der Erstellung des <a href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest"><code>XMLHttpRequest</code></a>-Objektes ist.</p> + +<h3 id="Beispiel_für_die_pushState()-Methode">Beispiel für die pushState()-Methode</h3> + +<p>Angenommen, <span class="nowiki">http://mozilla.org/foo.html</span> führt folgendes JavaScript aus:</p> + +<pre class="brush: js">var stateObj = { foo: "bar" }; +history.pushState(stateObj, "seite 2", "bar.html"); +</pre> + +<p>Das ändert die angezeigte URL zu <span class="nowiki">http://mozilla.org/bar.html</span>, bringt den Browser aber nicht dazu, <code>bar.html</code> zu laden oder überhaupt dessen Existenz zu überprüfen.</p> + +<p>Man nehme weiter an, der Benutzer navigiert zu http://google.com und klickt dann Zurück. Zu diesem Zeitpunkt wird die URL-Bar http://mozilla.org/bar.html anzeigen, und die Seite erhält ein <code>popstate</code>-Event mit einem <em>Status-Objekt</em>, das eine Kopie von <code>stateObj</code> darstellt. Die Seite selbst wird aussehen wie <code>foo.html</code>, aber während dem <code>popstate</code>-Event kann der Inhalt bearbeitet worden sein.</p> + +<p>Wenn der Benutzer noch einmal Zurück drückt, ändert sich die URL zu <span class="nowiki">http://mozilla.org/foo.html</span>, und die Seite erhält ein weiteres <code>popstate</code>-Event, dieses Mal mit einem <code>null</code> <em>Status-Objekt</em>. Auch hier wird der Inhalt der Seite nicht geändert, wenn das nicht manuell im <code>popstate</code>-Event vollzogen wird.</p> + +<h3 id="Die_pushState()-Methode">Die pushState()-Methode</h3> + +<p><code>pushState()</code> übernimmt drei Parameter: ein <em>state</em> Objekt, einen <em>title</em> (welcher aktuell noch ignoriert wird), und (optional) eine <em>URL</em>. Betrachten wir die einzelnen Parameter genauer:</p> + +<ul> + <li> + <p><strong>state-Objekt</strong> — Das Status-Objekt ist ein JavaScript-Objekt, das mit dem per <code>pushState()</code> neu erzeugten history-Eintrag verknüpft ist. Jedesmal wenn der Benutzer zu diesem neuen Status navigiert, wird ein <code>popstate</code>-Event ausgelöst. Die <code>state</code>-Eigenschaft des Events enthält dabei eine Kopie des Status-Objektes des history-Eintrages.<br> + <br> + Das Status-Objekt kann alles sein, was sich serialisieren lässt. Weil Firefox state-Objekte auf dem Speicher den Nutzers ablegt, lassen sie sich auch wiederherstellen, nachdem der Nutzer seinen Browser neu gestartet hat, das serialisierte Abbild des Status-Objekt ist dabei auf 640k Zeichen begrenzt. Wird ein größeres Status-Objekt an <code>pushState()</code> übergeben, gibt die Methode eine <em>Exception</em> aus. Wenn mehr Speicherplatz benötigt wird, sollte <code>sessionStorage</code> und/oder <code>localStorage</code> verwendet werden.</p> + </li> + <li> + <p><strong>title</strong> — Aktuell ignoriert Firefox diesen Parameter, wenngleich er in Zukunft verwendet werden könnte. Um gegenüber zukünftigen Änderungen abgesichert zu sein, empfiehlt sich, einen leeren String zu übergeben. Alternativ kann man hier einen kurzen Titel für den Status hinterlassen.</p> + </li> + <li> + <p><strong>URL</strong> — Der neue history-Eintrag erhält mit diesem Parameter seine URL. Man beachte, dass der Browser nicht versuchen wird, nach einem Aufruf von <code>pushState()</code> diese URL zu laden, aber später dennoch versuchen könnte, beispielsweise nachdem der Nutzer seinen Browser neu gestartet hat. Die neue URL muss nicht absolute sein; wenn sie relativ ist, wird sie relativ zur aktuellen URL aufgelöst. Die neue URL muss denselben Ursprung haben wie die aktuelle, sonst gibt <code>pushState()</code> eine <em>Exception</em> zurück. Dieser Parameter ist optional; falls er übergeben wird, wird er auf die aktuelle URL des <em>documents</em> gesetzt.</p> + </li> +</ul> + +<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div> + +<p>In gewissem Sinne ist der Aufruf von <code>pushState()</code> ähnlich dem Setzen von <code>window.location = "#foo"</code>, insofern beide einen weiteren history-Eintrag sowohl erzeugen als auch aktivieren, der mit dem aktuellen Document verbunden ist. Aber <code>pushState()</code> hat ein paar Vorteile:</p> + +<ul> + <li>Die neue URL kann irgendeine URL desselben Ursprungs sein wie die aktuelle URL.<br> + Im Gegensatz dazu bleibt <code>window.location</code> nur dann im selben {{ domxref("document") }} selbst wenn man nur den <em>hash</em> ändert.</li> + <li>Man muss nicht die URL ändern, wenn man nicht will. <br> + Im Gegensatz dazu erzeugt <code>window.location = "#foo";</code> nur dann einen neuen history-Eintrag, wenn der aktuelle <em>hash</em> nicht <code>#foo</code> ist. + <ul> + <li>Es lassen sich auch willkürliche Daten mit dem neuen history-Eintrag verbinden. Mit dem <em>hash</em>-basierten Ansatz müssen alle relevanten Daten in einen kurzen String kodiert werden.</li> + </ul> + </li> +</ul> + +<p>Man beachte, dass <code>pushState()</code> niemals das Auslösen eines <code>hashchange</code>-Events verursacht, selbst wenn sich die neue URL von der alten nur durch ihren <em>hash</em> unterscheidet.</p> + +<h3 id="Die_replaceState()-Methode">Die replaceState()-Methode</h3> + +<p><code>history.replaceState()</code> arbeitet genauso wie <code>history.pushState()</code>, abgesehen davon, dass <code>replaceState()</code> den aktuellen history-Eintrag verändert, statt einen neuen zu erzeugen.</p> + +<p><code>replaceState()</code> ist insbesondere nützlich, um das <em>Status</em>-Objekt oder die URL des aktuellen history-Eintrages als Reaktion auf eine Benutzer-Aktion zu aktualisieren.</p> + +<div class="note"><strong>Anmerkung:</strong> In Gecko 2.0 {{ geckoRelease("2.0") }} bis Gecko 5.0 {{ geckoRelease("5.0") }} wird das übergebene Objekt mittels JSON serialisiert. Ab Gecko 6.0 {{ geckoRelease("6.0") }}, übernimmt der<a href="/en/DOM/The_structured_clone_algorithm" title="en/DOM/The structured clone algorithm"> structured clone algorithm</a> die Serialisierung des Objekts. Dies erlaubt eine größere Vielfalt an Objekten, die sich sicher serialisieren lassen.</div> + +<h3 id="Beispiel_für_die_replaceState()-Methode">Beispiel für die replaceState()-Methode</h3> + +<p>Angenommen, http://mozilla.org/foo.html führt folgendes JavaScript aus:</p> + +<p> </p> + +<pre class="brush: js"><code>var stateObj = { foo: "bar" }; +history.pushState(stateObj, "page 2", "bar.html");</code></pre> + +<p>Die Erläuterung dieser beiden Zeilen findet sich in unter "Beispiel für die pushState()-Metode". Weiterhin nehme man an, http://mozilla.org/bar.html würde dieses JavaScript ausführen:</p> + +<pre class="brush: js"><code>history.replaceState(stateObj, "page 3", "bar2.html");</code></pre> + +<p>Dies lässt den Browser http://mozilla.org/bar2.html in der Adresszeile anzeigen, aber nicht <code>bar2.html</code> laden oder auch nur prüfen, ob <code>bar2.html</code> existiert.</p> + +<p>Nehmen wir nun an, dass der Nutzer zu http://www.microsoft.com navigiert und dann auf den Zurück-Button des Browsers drückt. Dann wird die Adresszeile http://mozilla.org/bar2.html anzeigen. Drückt der Benutzer den Zurück-Button nun nochmals, zeigt die Adresszeile http://mozilla.org/foo.html und umgeht bar.html vollständig.</p> + +<p> </p> + +<h3 id="The_popstate_event">The popstate event</h3> + +<p>A <code>popstate</code> event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to <code>pushState</code> or affected by a call to <code>replaceState</code>, the <code>popstate</code> event's <code>state</code> property contains a copy of the history entry's state object.</p> + +<p>See {{ domxref("window.onpopstate") }} for sample usage.</p> + +<h3 id="Reading_the_current_state">Reading the current state</h3> + +<p>When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using <code>pushState()</code> or <code>replaceState()</code>) and then the user restarts her browser. When your page reloads, the page will receive an <span style="font-family: courier new;">onload</span><span style="font-family: helvetica;"> event, but no <span style="font-family: courier new;">popstate</span> event.</span> However, if you read the <span style="font-family: courier new;">history.state</span> property, you'll get back the state object you would have gotten if a <span style="font-family: courier new;">popstate</span> had fired.</p> + +<p>You can read the state of the current history entry without waiting for a <code>popstate</code> event using the <code>history.state</code> property like this:</p> + +<pre class="brush: js">var currentState = history.state; +</pre> + +<h2 id="Examples">Examples</h2> + +<p>For a complete example of AJAX web site, please see: <a href="/en-US/docs/DOM/Manipulating_the_browser_history/Example" title="/en-US/docs/DOM/Manipulating_the_browser_history/Example">Ajax navigation example</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>5</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>5.0</td> + </tr> + <tr> + <td>history.state</td> + <td>18</td> + <td>{{ CompatGeckoDesktop("2.0") }}</td> + <td>10</td> + <td>11.50</td> + <td>6.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>replaceState, pushState</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>history.state</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("window.history") }}</li> + <li>{{ domxref("window.onpopstate") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/DOM/Manipulating_the_browser_history"} ) }}</p> diff --git a/files/de/web/api/html_drag_and_drop_api/index.html b/files/de/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..292b860888 --- /dev/null +++ b/files/de/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,11 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +translation_of_original: DragDrop +--- +<p> </p> +<p>See <a href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop</a></p> diff --git a/files/de/web/api/htmlelement/change_event/index.html b/files/de/web/api/htmlelement/change_event/index.html new file mode 100644 index 0000000000..8836b6bc67 --- /dev/null +++ b/files/de/web/api/htmlelement/change_event/index.html @@ -0,0 +1,109 @@ +--- +title: change +slug: Web/Events/change +translation_of: Web/API/HTMLElement/change_event +--- +<p>Das <code>change</code> Event wird von {{HTMLElement("input")}}, {{HTMLElement("select")}}, und {{HTMLElement("textarea")}} Elementen ausgelöst, wenn der Benutzer den Wert des Elements verändert. Im Gegensatz zum {{event("input")}} Event wird das <code>change</code> Event nicht bei jeder Änderung der <code>value</code> Eigenschaft ausgelöst.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">undefined</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Beschreibung">Beschreibung</h2> + +<p>Das <code>change</code> Event wird abhängig vom Form-Element, welches verändert wird, und der Art der Benutzerinteraktion mit dem Element in verschiedenen Situationen ausgelöst:</p> + +<ul> + <li>Wenn das Element aktiviert ist (durch einen KIlick oder Verwendung der Tastatur) bei <code><input type="radio"></code> und <code><input type="checkbox"></code>;</li> + <li>Wenn der Benutzer den Veränderung explizit bestätigt (z.B.: beim Auswählen eines Wertes eines {{HTMLElement("select")}}'s Dropdown mit einem Mausklick, beim Auswählen eine Datums bei einem Date Picker für <code><input type="date"></code>, beim Auswählen einer Datei im File Picker für <code><input type="file"></code>, etc.);</li> + <li>Wenn das Element den Fokus verliert, nachdem sein Wert verändert aber noch nicht bestätigt wurde (z.B.: nach dem Editieren des Wert eines {{HTMLElement("textarea")}} oder <code><input type="text"></code>).</li> +</ul> + +<p>Verschiedene Webbbrowser unterscheiden sich darin, ob das <code>change</code> Event bei bestimmten Interaktionen ausgelöst werden soll oder nicht. Tastaturnavigation in {{HTMLElement("select")}} Elementen zum Beispiel lösen das <code>change</code> event in Gecko nie aus bis der Benutzer die Enter-Taste drückt oder den Fokus vom <code><select></code> (see {{bug("126379")}}) Element nimmt.</p> + +<p>Die HTML Spezifikation listet<a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#do-not-apply"> die <code><input></code> Typen, welche das <code>change</code> Event auslösen können</a>.</p> + +<h2 id="Beispiele">Beispiele</h2> + +<p>Ein unvollständiges Beispiel auf jsfiddle: <a href="http://jsfiddle.net/nfakc/5/" title="http://jsfiddle.net/nfakc/5/">http://jsfiddle.net/nfakc/5/</a>, welches möglicherweise nich in allen Webbrowsern funktioniert.</p> + +<h3 id="Beispiel_Change_Event_auf_einem_select">Beispiel: Change Event auf einem <code>select</code></h3> + +<p>Der folgende Code behandelt das <code>change</code> Event eines <code>select</code> durch den Aufruf der <code>changeEventHandler</code> Funktion im <code>onchange</code> Attribut. Die Funktion liest den Wert des Elements, das das Event auslöste, und gibt ihn in einem Alert aus.</p> + +<pre class="brush: html"><html> + <head> + <title>Example: Change event on a select</title> + <script type="text/javascript"> + function changeEventHandler(event) { + alert('You like ' + event.target.value + ' ice cream.'); + } + </script> + </head> + <body> + <label>Choose an ice cream flavor: </label> + <select size="1" onchange="changeEventHandler(event);"> + <option>chocolate</option> + <option>strawberry</option> + <option>vanilla</option> + </select> + </body> +</html> +</pre> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<p>{{domxref("NetworkInformation.connection")}} löst das <code>change</code> Event aus, wenn sich die Informationen zur Verbindung verändern.</p> + +<h2 id="Webbrowserkompatibilität">Webbrowserkompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<p>Laut <a href="http://www.quirksmode.org/dom/events/">QuirksMode</a> sind Chrome und Firefox manchmal kompatibel. Aber IE9 und frühere Versionen von IE10 haben nur eine unvollständige Unterstützung.</p> diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/htmlelement/innertext/index.html index bd1594471a..bd1594471a 100644 --- a/files/de/web/api/node/innertext/index.html +++ b/files/de/web/api/htmlelement/innertext/index.html diff --git a/files/de/web/api/htmlheadelement/index.html b/files/de/web/api/htmlheadelement/index.html new file mode 100644 index 0000000000..1c71988bda --- /dev/null +++ b/files/de/web/api/htmlheadelement/index.html @@ -0,0 +1,28 @@ +--- +title: head +slug: Web/HTML/Element/head +tags: + - HTML + - HTML Elemente + - HTML Referenz +translation_of: Web/API/HTMLHeadElement +--- +<p>Das <code><head></code> HTML Element legt den Kopf eines Dokuments fest. In diesem werden Informationen für das Dokument angegeben, darunter der Dokumententitel und Meta-Daten.</p> + +<h3 id="Beispiel">Beispiel</h3> + +<pre class="eval"><html> + <head> + <title>Seitentitel</title> + </head> +</html> +</pre> + +<h3 id="Spezifikationen">Spezifikationen</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/html401/struct/global.html#h-7.4.1">HTML 4.01 #head</a></li> + <li><a class="external" href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">HTML5 #head</a></li> +</ul> + +<p>{{HTMLRef}}</p> diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html index 6ae6f33dd7..6ae6f33dd7 100644 --- a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html +++ b/files/de/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/using_indexeddb/index.html index 3d6d61cf3f..3d6d61cf3f 100644 --- a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html +++ b/files/de/web/api/indexeddb_api/using_indexeddb/index.html diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html index 5f48e63097..5f48e63097 100644 --- a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html +++ b/files/de/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.html diff --git a/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html index 56c267f394..56c267f394 100644 --- a/files/de/web/api/webgl_api/tutorial/hinzufügen_von_2d_inhalten_in_einen_webgl-kontext/index.html +++ b/files/de/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html index a9eafed6db..a9eafed6db 100644 --- a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html +++ b/files/de/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html index bfeb362b8e..bfeb362b8e 100644 --- a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html +++ b/files/de/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html index d3a21591fd..d3a21591fd 100644 --- a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html +++ b/files/de/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html index 5906f95761..5906f95761 100644 --- a/files/de/web/api/webgl_api/tutorial/einführung_in_webgl/index.html +++ b/files/de/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html index bd65b5bb40..bd65b5bb40 100644 --- a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html +++ b/files/de/web/api/webgl_api/tutorial/lighting_in_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html b/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html index 94068822d5..94068822d5 100644 --- a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzufügen/index.html +++ b/files/de/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html index eb59417694..eb59417694 100644 --- a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html +++ b/files/de/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html diff --git a/files/de/web/api/websockets_api/index.html b/files/de/web/api/websockets_api/index.html new file mode 100644 index 0000000000..1e3cefa7d9 --- /dev/null +++ b/files/de/web/api/websockets_api/index.html @@ -0,0 +1,193 @@ +--- +title: WebSockets +slug: WebSockets +tags: + - Referenz + - WebSockets +translation_of: Web/API/WebSockets_API +--- +<p>WebSockets ist eine fortschrittliche Technologie welche es möglich macht eine interaktive Kommunikations-Session zwischen dem Browser des Benutzers und dem Server herzustellen. Mit dieser API können Sie Nachrichten zum Server senden und ereignisorientierte Antworten erhalten ohne beim Server die Antwort abzufragen.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Documentation" name="Documentation">Dokumentation</h2> + +<dl> + <dt><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications" title="WebSockets/Writing WebSocket client applications">Websocket Client-Anwendungen schreiben</a></dt> + <dd>Eine Anleitung um WebSocket-Clients im Browser laufen zu lassen.</dd> + <dt><a href="/en-US/docs/WebSockets/WebSockets_reference" title="WebSockets/WebSockets reference">WebSockets Referenz</a></dt> + <dd>Eine Referenz für die Client-seitige WebSocket API.</dd> + <dt><a href="https://developer.mozilla.org/de/docs/WebSockets/Writing_WebSocket_servers">Websocket-Server schreiben (Benötigt Inhalt)</a></dt> + <dd>Eine Anleitung zum schreiben von Server-seitigem Code um das WebSocket-Protokoll zu handhaben.</dd> +</dl> + +<p><span class="alllinks"><a href="/en-US/docs/tag/WebSockets" title="tag/WebSockets">Alle zeigen...</a></span></p> +</div> + +<div class="section"> +<h2 class="Tools" id="Tools" name="Tools">Tools</h2> + +<ul> + <li><a class="external" href="http://socket.io" title="http://socket.io/">Socket.IO</a>: Eine mächtige, plattform-übergreifende WebSocket API für <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a class="link-https" href="https://github.com/Worlize/WebSocket-Node" title="https://github.com/Worlize/WebSocket-Node">WebSocket-Node</a>: Eine WebSocket-Server API Implementation für <a class="external" href="http://nodejs.org" title="http://nodejs.org/">Node.js</a>.</li> + <li><a href="http://www.totaljs.com">Total.js</a>: Ein Web-Applikation Framework für <a href="http://www.nodejs.org">Node.js</a> (Beispiel: <a href="https://github.com/totaljs/examples/tree/master/websocket">WebSocket chat</a>)</li> + <li><a href="http://ajf.me/websocket/#libs">Eine erweiterte Liste von Frameworks und Bibliotheken</a></li> +</ul> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Verwandte Themen</h2> + +<ul> + <li><a href="/en-US/docs/AJAX" title="AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="JavaScript">JavaScript</a></li> +</ul> +</div> +</div> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a class="external" href="http://tools.ietf.org/html/rfc6455">RFC 6455 - The WebSocket Protocol</a></li> + <li><a class="external" href="http://www.w3.org/TR/websockets/">WebSocket API Specification</a></li> + <li><a href="/en-US/docs/Server-sent_events" title="Server-sent_events">Server-Sent Events</a></li> +</ul> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Version -76 {{obsolete_inline}}</td> + <td>6</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>11.00 (disabled)</td> + <td>5.0.1</td> + </tr> + <tr> + <td>Protokol-Version 7 {{obsolete_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("6.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Protokol-Version 10 {{obsolete_inline}}</td> + <td>14</td> + <td>{{CompatGeckoDesktop("7.0")}}<br> + {{property_prefix("Moz")}}</td> + <td>HTML5 Labs</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>16</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>10</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Benutzbarkeit in Workern</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Version -76<br> + {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protokol-Version 7<br> + {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Protokol-Version 8 (IETF-Entwurf 10) {{obsolete_inline}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("7.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Standard - RFC 6455 Support</td> + <td>4.4</td> + <td>{{CompatGeckoDesktop("11.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>12.10</td> + <td>6.0</td> + </tr> + <tr> + <td>Benutzbarkeit in Workern</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("37.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Hinweise_zu_Gecko">Hinweise zu Gecko</h3> + +<p>Die WebSocket-Unterstützung in Firefox wird weiterhin die Entwicklungen in der entstehenden WebSocket-Spezifikation verfolgen. Firefox 6 implementiert Version 7 des darunterliegenden Protokolls, währen Firefox 7 Version 8 implementiert (lt. IETF-Vorlage 10). Firefox mobile erhielt in Version 7.0 unterstützung für WebSockets.</p> + +<h4 id="Gecko_6.0">Gecko 6.0</h4> + +<p>Vor Gecko 6.0 {{geckoRelease("6.0")}} gab es, fälschlicherweise, ein <code>WebSocket</code>-Objekt. Mane Seiten schlossen daraus, dass <code>WebSocket</code>-Dienste keine Präfixe haben; dieses Objekt wurde mittlerweile zu <code>MozWebSocket</code> umbenannt.</p> + +<h4 id="Gecko_7.0">Gecko 7.0</h4> + +<p>Beginnend mit Gecko 7.0 {{geckoRelease("7.0")}} wird die Einstellung <code>network.websocket.max-connections</code> genutzt, um die maximale Anzahl von WebSockets festzustellen, die gleichzeitig genutzt werden können. Der Standardwert ist 200.</p> + +<h4 id="Gecko_8.0">Gecko 8.0</h4> + +<p>Beginnend mit Gecko 8.0 {{geckoRelease("8.0")}} wird die Deflate-Stream-Erweiterung des WebSocket-Protokolls abgeschaltet, da es von den Spezifikations-Vorlagen überholt wurde. Dies löst Inkompatibilitäten mit manchen Seiten.</p> + +<h4 id="Gecko_11.0">Gecko 11.0</h4> + +<p>Vor Gecko 11.0 waren sowohl eingehende als auch ausgehende Nachrichten auf 16 MB begrenzt. Sie können jetzt bis zu 2 GB groß sein. Beachten Sie, dass Speicherbegrenzungen (insbesondere auf mobilen Geräten) ein theoretisches Maximum darstellen, jedoch kein praktisches. In Wirklichkeit werden Übertragungen dieser Größe auf Geräten, die nicht über genügend Speicher verfügen, fehlschlagen.</p> + +<p>Zusätzlich wurde eine ArrayBuffer Sende- und Empfangsunterstützung für Binärdaten implementiert.</p> + +<p>Ab Gecko 11.0 steht die WebSocket-API ohne Präfixe zur Verfügung.</p> diff --git a/files/de/web/api/websockets_api/writing_websocket_servers/index.html b/files/de/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..031a2b832a --- /dev/null +++ b/files/de/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,250 @@ +--- +title: Writing WebSocket servers +slug: WebSockets/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +<div>{{APIRef("Websockets API")}}</div> + +<p>E<span class="tlid-translation translation" lang="de"><span title="">in WebSocket-Server ist nichts anderes als eine Anwendung, die einen Port eines TCP-Servers überwacht, der einem bestimmten Protokoll folgt.</span> <span title="">Die Aufgabe, einen benutzerdefinierten Server zu erstellen, macht den Leuten Angst.</span> <span title="">Es kann jedoch unkompliziert sein, einen einfachen WebSocket-Server auf einer Plattform Ihrer Wahl zu implementieren.</span></span></p> + +<p><span class="tlid-translation translation" lang="de"><span title="">Ein WebSocket-Server kann in jeder serverseitigen Programmiersprache geschrieben werden, die dazu in der Lage ist</span></span>: <a href="https://en.wikipedia.org/wiki/Berkeley_sockets">Berkeley sockets</a>, siehe auch C(++), Python, <a href="/en-US/docs/PHP">PHP</a>, oder Serverseitiges<a href="/en-US/docs/Web/JavaScript/Server-Side_JavaScript"> JavaScript</a>.</p> + +<p><span class="tlid-translation translation" lang="de"><span title="">Dies ist kein Tutorial in einer bestimmten Sprache, sondern dient als Leitfaden, um das Schreiben Ihres eigenen Servers zu erleichtern.</span></span></p> + +<p><span class="tlid-translation translation" lang="de"><span title="">In diesem Artikel wird davon ausgegangen, dass Sie bereits mit der Funktionsweise von {{Glossary ("HTTP")}} vertraut sind und über ein moderates Programmiererlebnis verfügen.</span> <span title="">Abhängig von der Sprachunterstützung sind möglicherweise Kenntnisse über TCP-Sockets erforderlich.</span> <span title="">In diesem Handbuch wird das Mindestwissen dargestellt, das Sie zum Schreiben eines WebSocket-Servers benötigen.</span></span></p> + +<div class="note"> +<p><strong><u>Notiz</u>:</strong> <span class="tlid-translation translation" lang="de"><span title="">Lesen Sie die neueste offizielle WebSockets-Spezifikation, RFC 6455. Die Abschnitte 1 und 4-7 sind für Server-Implementierer besonders interessant.</span> <span title="">In Abschnitt 10 wird die Sicherheit erläutert, und Sie sollten sie unbedingt lesen, bevor Sie Ihren Server verfügbar machen.</span></span></p> +</div> + +<p><span class="tlid-translation translation" lang="de"><span title="">Ein WebSocket-Server wird hier auf sehr niedriger Ebene erklärt.</span> <span title="">WebSocket-Server sind häufig separate und spezialisierte Server (aus Gründen des Lastenausgleichs oder aus anderen praktischen Gründen). Daher verwenden Sie häufig einen Reverse-Proxy (z. B. einen normalen HTTP-Server), um WebSocket-Handshakes zu erkennen, vorzuverarbeiten und an diese Clients zu senden</span> <span title="">ein echter WebSocket-Server.</span> <span title="">Dies bedeutet, dass Sie Ihren Servercode nicht mit Cookie- und Authentifizierungshandlern (zum Beispiel) aufblähen müssen.</span></span></p> + +<h2 id="Der_WebSocket-Handshake"><strong><u><span class="tlid-translation translation" lang="de"><span title="">Der WebSocket-Handshake</span></span> </u></strong></h2> + +<p><span class="tlid-translation translation" lang="de"><span title="">Zunächst muss der Server mithilfe eines Standard-TCP-Sockets auf eingehende Socket-Verbindungen warten.</span> <span title="">Abhängig von Ihrer Plattform kann dies automatisch für Sie erledigt werden.</span> <span title="">Angenommen, Ihr Server überwacht example.com, Port 8000, und Ihr Socket-Server antwortet auf {{HTTPMethod ("GET")}} -Anfragen unter example.com/chat.</span></span></p> + +<div class="warning"> +<p><span class="tlid-translation translation" lang="de"><span title=""><u>Warnung</u>: Der Server überwacht möglicherweise jeden von ihm ausgewählten Port. Wenn er jedoch einen anderen Port als 80 oder 443 auswählt, kann es zu Problemen mit Firewalls und / oder Proxys kommen.</span> <span title="">Browser benötigen im Allgemeinen eine sichere Verbindung für WebSockets, obwohl sie möglicherweise eine Ausnahme für lokale Geräte bieten.</span></span></p> +</div> + +<p><span class="tlid-translation translation" lang="de"><span title="">Der Handshake ist das "Web" in WebSockets.</span> <span title="">Es ist die Brücke von HTTP zu WebSockets.</span> <span title="">Beim Handshake werden Details der Verbindung ausgehandelt, und jede Partei kann vor Abschluss zurücktreten, wenn die Bedingungen ungünstig sind.</span> <span title="">Der Server muss darauf achten, alles zu verstehen, was der Client verlangt, da sonst Sicherheitsprobleme auftreten können.</span></span></p> + +<div class="blockIndicator note"> +<p><span class="tlid-translation translation" lang="de"><span title=""><u>Tipp</u>: Die Anfrage-URL (/ Chat hier) hat in der Spezifikation keine definierte Bedeutung.</span> <span title="">Viele Benutzer verwenden es daher, damit ein Server mehrere WebSocket-Anwendungen verarbeiten kann.</span> <span title="">Zum Beispiel könnte example.com/chat eine Mehrbenutzer-Chat-App aufrufen, während /game auf demselben Server möglicherweise ein Multiplayer-Spiel aufruft.</span></span></p> +</div> + +<h3 id="Client_handshake_Anfrage">Client handshake Anfrage</h3> + +<p><span class="tlid-translation translation" lang="de"><span title="">Auch wenn Sie einen Server erstellen, muss ein Client den WebSocket-Handshake-Prozess starten, indem er den Server kontaktiert und eine WebSocket-Verbindung anfordert.</span> <span title="">Sie müssen also wissen, wie Sie die Anfrage des Kunden interpretieren.</span> <span title="">Der Client sendet eine ziemlich normale HTTP-Anfrage mit Headern, die so aussehen (die HTTP-Version muss 1.1 oder höher sein und die Methode muss GET sein):</span></span></p> + +<pre class="notranslate">GET /chat HTTP/1.1 +Host: example.com:8000 +<strong>Upgrade: websocket</strong> +<strong>Connection: Upgrade</strong> +Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== +Sec-WebSocket-Version: 13 + +</pre> + +<p><span class="tlid-translation translation" lang="de"><span title="">Der Client kann hier Erweiterungen und / oder Unterprotokolle anfordern.</span> <span title="">Einzelheiten finden Sie unter Sonstiges.</span> <span title="">Es können auch allgemeine Header wie {{HTTPHeader ("User-Agent")}}, {{HTTPHeader ("Referer")}}, {{HTTPHeader ("Cookie")}} oder Authentifizierungsheader vorhanden sein.</span> <span title="">Mach mit denen, was du willst;</span> <span title="">Sie beziehen sich nicht direkt auf das WebSocket.</span> <span title="">Es ist auch sicher, sie zu ignorieren.</span> <span title="">In vielen gängigen Setups hat sich bereits ein Reverse-Proxy mit ihnen befasst.</span></span></p> + +<div class="blockIndicator note"> +<p><span class="tlid-translation translation" lang="de"><span title=""><u>Tipp</u>: Alle Browser senden einen Origin-Header.</span> <span title="">Sie können diesen Header aus Sicherheitsgründen verwenden (nach demselben Ursprung suchen, automatisch zulassen oder ablehnen usw.) und eine 403 Forbidden senden, wenn Ihnen das, was Sie sehen, nicht gefällt.</span> <span title="">Seien Sie jedoch gewarnt, dass Nicht-Browser-Agenten einen gefälschten Ursprung senden können.</span> <span title="">Die meisten Anwendungen lehnen Anforderungen ohne diesen Header ab.</span></span></p> +</div> + +<p><span class="tlid-translation translation" lang="de"><span title="">Wenn ein Header nicht verstanden wird oder einen falschen Wert hat, sollte der Server eine {{HTTPStatus ("400")}} ("Bad Request")} Antwort senden und den Socket sofort schließen.</span> <span title="">Wie üblich wird möglicherweise auch der Grund angegeben, warum der Handshake im HTTP-Antworttext fehlgeschlagen ist, die Nachricht wird jedoch möglicherweise nie angezeigt (Browser zeigen sie nicht an).</span> <span title="">Wenn der Server diese Version von WebSockets nicht versteht, sollte er einen {{HTTPHeader ("Sec-WebSocket-Version")}} Header zurücksenden, der die Version (en) enthält, die er versteht.</span> <span title="">Im obigen Beispiel wird Version 13 des WebSocket-Protokolls angegeben.</span><br> + <br> + <span title="">Der interessanteste Header hier ist {{HTTPHeader ("Sec-WebSocket-Key")}}.</span> <span title="">Schauen wir uns das also als nächstes an.</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="de"><span title=""><u>Hinweis</u>: Normale HTTP-Statuscodes können nur vor dem Handshake verwendet werden.</span> <span title="">Nach erfolgreichem Handshake müssen Sie einen anderen Satz von Codes verwenden (definiert in Abschnitt 7.4 der Spezifikation).</span></span></p> +</div> + +<h3 id="Server_handshake_Antwort">Server handshake Antwort</h3> + +<p><span class="tlid-translation translation" lang="de"><span title="">Wenn der Server die Handshake-Anforderung empfängt, sollte er eine spezielle Antwort zurücksenden, die angibt, dass das Protokoll von HTTP zu WebSocket geändert wird.</span> <span title="">Dieser Header sieht ungefähr so aus (denken Sie daran, dass jede Headerzeile mit \ r \ n endet, und setzen Sie nach dem letzten ein zusätzliches \ r \ n, um das Ende des Headers anzuzeigen):</span></span></p> + +<pre class="notranslate"><strong>HTTP/1.1 101 Switching Protocols</strong> +Upgrade: websocket +Connection: Upgrade +<strong>Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= + +</strong></pre> + +<p><span class="tlid-translation translation" lang="de"><span title="">Darüber hinaus kann der Server hier über Erweiterungs- / Unterprotokollanforderungen entscheiden.</span> <span title="">Einzelheiten finden Sie unter Sonstiges.</span> <span title="">Der Sec-WebSocket-Accept-Header ist wichtig, da der Server ihn von dem {{HTTPHeader ("Sec-WebSocket-Key")}} ableiten muss, den der Client an ihn gesendet hat.</span> <span title="">Verketten Sie dazu den Sec-WebSocket-Key des Clients und die Zeichenfolge "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" (es handelt sich um eine "magische Zeichenfolge"), nehmen Sie den SHA-1-Hash des Ergebnisses und geben Sie den base64 zurück</span> <span title="">Codierung dieses Hashs.</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="de"><span title=""><strong><u>Hinweis</u></strong>: Dieser scheinbar überkomplizierte Prozess ist vorhanden, sodass für den Client offensichtlich ist, ob der Server WebSockets unterstützt.</span> <span title="">Dies ist wichtig, da Sicherheitsprobleme auftreten können, wenn der Server eine WebSockets-Verbindung akzeptiert, die Daten jedoch als HTTP-Anforderung interpretiert.</span></span></p> +</div> + +<p><span class="tlid-translation translation" lang="de"><span title="">Wenn der Schlüssel also "dGhlIHNhbXBsZSBub25jZQ ==" war, lautet der Wert des Sec-WebSocket-Accept-Headers "s3pPLMBiTxaQ9kYGzzhZRbK + xOo =".</span> <span title="">Sobald der Server diese Header sendet, ist der Handshake abgeschlossen und Sie können mit dem Datenaustausch beginnen !</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation" lang="de"><span title=""><strong><u>Hinweis</u></strong>: Der Server kann andere Header wie {{HTTPHeader ("Set-Cookie")}} senden oder über andere Statuscodes nach Authentifizierung oder Weiterleitung fragen, bevor er den Antwort-Handshake sendet.</span></span></p> +</div> + +<h3 id="Clients_im_Auge_behalten"> <span class="tlid-translation translation" lang="de"><span title="">Clients im Auge behalten</span></span></h3> + +<p><span class="tlid-translation translation" lang="de"><span title="">Dies bezieht sich nicht direkt auf das WebSocket-Protokoll, ist jedoch hier erwähnenswert: Ihr Server muss die Sockets der Clients verfolgen, damit Sie bei Clients, die den Handshake bereits abgeschlossen haben, nicht erneut Handshakes durchführen.</span> <span title="">Dieselbe Client-IP-Adresse kann mehrmals versuchen, eine Verbindung herzustellen.</span> <span title="">Der Server kann sie jedoch ablehnen, wenn sie zu viele Verbindungen versuchen, um sich vor Denial-of-Service-Angriffen zu schützen.</span><br> + <br> + <span title="">Beispielsweise können Sie eine Tabelle mit Benutzernamen oder ID-Nummern zusammen mit den entsprechenden {{domxref ("WebSocket")}} und anderen Daten führen, die Sie dieser Verbindung zuordnen müssen.</span></span></p> + +<h2 id="Exchanging_data_frames">Exchanging data frames</h2> + +<p>Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using <a href="https://en.wikipedia.org/wiki/XOR_cipher">XOR encryption</a> (with a 32-bit key). Section 5 of the specification describes this in detail.</p> + +<h3 id="Format">Format</h3> + +<p>Each data frame (from the client to the server or vice-versa) follows this same format:</p> + +<pre class="notranslate">Frame format: + + 0 1 2 3 + 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 + +-+-+-+-+-------+-+-------------+-------------------------------+ + |F|R|R|R| opcode|M| Payload len | Extended payload length | + |I|S|S|S| (4) |A| (7) | (16/64) | + |N|V|V|V| |S| | (if payload len==126/127) | + | |1|2|3| |K| | | + +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + + | Extended payload length continued, if payload len == 127 | + + - - - - - - - - - - - - - - - +-------------------------------+ + | |Masking-key, if MASK set to 1 | + +-------------------------------+-------------------------------+ + | Masking-key (continued) | Payload Data | + +-------------------------------- - - - - - - - - - - - - - - - + + : Payload Data continued ... : + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + | Payload Data continued ... | + +---------------------------------------------------------------+</pre> + +<p>The MASK bit tells whether the message is encoded. Messages from the client must be masked, so your server must expect this to be 1. (In fact, <a href="http://tools.ietf.org/html/rfc6455#section-5.1">section 5.1 of the spec</a> says that your server must disconnect from a client if that client sends an unmasked message.) When sending a frame back to the client, do not mask it and do not set the mask bit. We'll explain masking later. <em>Note: You must mask messages even when using a secure socket. </em>RSV1-3 can be ignored, they are for extensions.</p> + +<p>The opcode field defines how to interpret the payload data: <span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"><code>0x0</code> </span><span style="line-height: 1.5;">for continuation,</span><span style="font-family: courier new,andale mono,monospace; line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;">0x1</code><span style="line-height: 1.5;"> for text (which is always encoded in UTF-8), </span><code style="font-style: normal; line-height: 1.5;">0x2</code><span style="line-height: 1.5;"> for binary, and other so-called "control codes" that will be discussed later. In this version of WebSockets, <code>0x3</code> to <code>0x7</code> and <code>0xB</code> to <code>0xF</code> have no meaning.</span></p> + +<p>The FIN bit tells whether this is the last message in a series. If it's 0, then the server keeps listening for more parts of the message; otherwise, the server should consider the message delivered. More on this later.</p> + +<h3 id="Decoding_Payload_Length">Decoding Payload Length</h3> + +<p>To read the payload data, you must know when to stop reading. That's why the payload length is important to know. Unfortunately, this is somewhat complicated. To read it, follow these steps:</p> + +<ol> + <li>Read bits 9-15 (inclusive) and interpret that as an unsigned integer. If it's 125 or less, then that's the length; you're <strong>done</strong>. If it's 126, go to step 2. If it's 127, go to step 3.</li> + <li>Read the next 16 bits and interpret those as an unsigned integer. You're <strong>done</strong>.</li> + <li>Read the next 64 bits and interpret those as an unsigned integer. (The most significant bit <em>must</em> be 0.) You're <strong>done</strong>.</li> +</ol> + +<h3 id="Reading_and_Unmasking_the_Data">Reading and Unmasking the Data</h3> + +<p>If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. <span style="line-height: 1.5;">Once the payload length and masking key is decoded, you can read that number of bytes from the socket. Let's call the data <strong>ENCODED</strong>, and the key <strong>MASK</strong>. To get <strong>DECODED</strong>, loop through the octets (bytes a.k.a. characters for text data) of <strong>ENCODED</strong> and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):</span></p> + +<pre class="notranslate">var DECODED = ""; +for (var i = 0; i < ENCODED.length; i++) { + DECODED[i] = ENCODED[i] ^ MASK[i % 4]; +<span style="line-height: 1.5;">}</span></pre> + +<p><span style="line-height: 1.5;">Now you can figure out what <strong>DECODED</strong> means depending on your application.</span></p> + +<h3 id="Message_Fragmentation">Message Fragmentation</h3> + +<p>The FIN and opcode fields work together to send a message split up into separate frames. This is called message fragmentation. Fragmentation is only available on opcodes <code>0x0</code> to <code>0x2</code>.</p> + +<p><span style="line-height: 1.5;">Recall that the opcode tells what a frame is meant to do. If it's <code>0x1</code>, the payload is text. If it's <code>0x2</code>, the payload is binary data.</span><span style="line-height: 1.5;"> However, if it's </span><code style="font-style: normal; line-height: 1.5;">0x0,</code><span style="line-height: 1.5;"> the frame is a continuation frame; this means the server should concatenate the frame's payload to the last frame it received from that client.</span><span style="line-height: 1.5;"> Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:</span></p> + +<pre style="font-size: 14px;"><strong>Client:</strong> FIN=1, opcode=0x1, msg="hello" +<strong>Server:</strong> <em>(process complete message immediately) </em>Hi. +<strong>Client:</strong> FIN=0, opcode=0x1, msg="and a" +<strong>Server:</strong> <em>(listening, new message containing text started)</em> +<strong>Client:</strong> FIN=0, opcode=0x0, msg="happy new" +<strong>Server:</strong> <em>(listening, payload concatenated to previous message)</em> +<strong>Client:</strong> FIN=1, opcode=0x0, msg="year!" +<strong>Server:</strong> <em>(process complete message) </em>Happy new year to you too!</pre> + +<p>Notice the first frame contains an entire message (has <code>FIN=1</code> and <code>opcode!=0x0</code>), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (<code>opcode=0x1</code>), but the entire message has not arrived yet (<code>FIN=0</code>). All remaining parts of that message are sent with continuation frames (<code>opcode=0x0</code>), and the final frame of the message is marked by <code>FIN=1</code>. <a href="http://tools.ietf.org/html/rfc6455#section-5.4">Section 5.4 of the spec</a> describes message fragmentation.</p> + +<h2 id="Pings_and_Pongs_The_Heartbeat_of_WebSockets">Pings and Pongs: The Heartbeat of WebSockets</h2> + +<p>At any point after the handshake, either the client or the server can choose to send a ping to the other party. When the ping is received, the recipient must send back a pong as soon as possible. You can use this to make sure that the client is still connected, for example.</p> + +<p>A ping or pong is just a regular frame, but it's a <strong>control frame</strong>. Pings have an opcode of <code>0x9</code>, and pongs have an opcode of <code>0xA</code>. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.</p> + +<div class="note"> +<p>If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.</p> +</div> + +<h2 id="Closing_the_connection">Closing the connection</h2> + +<p>To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in <a href="http://tools.ietf.org/html/rfc6455#section-5.5.1">Section 5.5.1</a>). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. </p> + +<h2 id="Miscellaneous_2"><a name="Miscellaneous">Miscellaneous</a></h2> + +<div class="note"> +<p>WebSocket codes, extensions, subprotocols, etc. are registered at the <a href="http://www.iana.org/assignments/websocket/websocket.xml">IANA WebSocket Protocol Registry</a>.</p> +</div> + +<p>WebSocket extensions and subprotocols are negotiated via headers during <a href="#Handshake">the handshake</a>. Sometimes extensions and subprotocols very similar, but there is a clear distinction. Extensions control the WebSocket <em>frame</em> and <em>modify</em> the payload, while subprotocols structure the WebSocket <em>payload</em> and <em>never modify</em> anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).</p> + +<h3 id="Extensions">Extensions</h3> + +<div class="note"> +<p><strong>This section needs expansion. Please edit if you are equipped to do so.</strong></p> +</div> + +<p>Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the <em>same</em> data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.</p> + +<div class="note"> +<p>Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.</p> +</div> + +<p><em>TODO</em></p> + +<h3 id="Subprotocols">Subprotocols</h3> + +<p>Think of a subprotocol as a custom <a href="https://en.wikipedia.org/wiki/XML_schema">XML schema</a> or <a href="https://en.wikipedia.org/wiki/Document_Type_Definition">doctype declaration</a>. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.</p> + +<div class="note"> +<p>Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.</p> +</div> + +<p>A client has to ask for a specific subprotocol. To do so, it will send something like this <em>as part of the original handshake</em>:</p> + +<pre class="notranslate">GET /chat HTTP/1.1 +... +Sec-WebSocket-Protocol: soap, wamp + +</pre> + +<p>or, equivalently:</p> + +<pre class="notranslate">... +Sec-WebSocket-Protocol: soap +Sec-WebSocket-Protocol: wamp + +</pre> + +<p>Now the server must pick one of the protocols that the client suggested and it supports. If there is more than one, send the first one the client sent. Imagine our server can use both <code>soap</code> and <code>wamp</code>. Then, in the response handshake, it sends:</p> + +<pre class="notranslate">Sec-WebSocket-Protocol: soap + +</pre> + +<div class="warning"> +<p>The server can't send more than one <code>Sec-Websocket-Protocol</code> header.<br> + <span style="line-height: 1.5;">If the server doesn't want to use a</span><span style="line-height: 1.5;">ny subprotocol, </span><em><strong style="line-height: 1.5;">it shouldn't send any <code>Sec-WebSocket-Protocol</code> header</strong></em><span style="line-height: 1.5;">. Sending a blank header is incorrect. The client may close the connection if it doesn't get the subprotocol it wants.</span></p> +</div> + +<p>If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol <code>json</code>. In this subprotocol, all data is passed as <a href="https://en.wikipedia.org/wiki/JSON">JSON</a>. If the client solicits this protocol and the server wants to use it, the server needs to have a JSON parser. Practically speaking, this will be part of a library, but the server needs to pass the data around.</p> + +<div class="note"> +<p><strong>Tip:</strong> To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: <code>Sec-WebSocket-Protocol: chat.example.com</code>. Note that this isn't required, it's just an optional convention, and you can use any string you wish.</p> +</div> + +<h2 id="Related">Related</h2> + +<ul> + <li><a href="https://github.com/alexhultman/libwshandshake">WebSocket handshake library in C++</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_client_applications">Writing WebSocket client applications</a></li> + <li><a href="/en-US/docs/WebSockets/Writing_WebSocket_server" title="/en-US/docs/WebSockets/Writing_WebSocket_server">Tutorial: Websocket server in C#</a></li> + <li><a href="/en-US/docs/WebSockets/WebSocket_Server_Vb.NET">Tutorial: Websocket server in VB.NET</a></li> + <li><a href="/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java">Tutorial: Websocket server in Java</a></li> +</ul> diff --git a/files/de/web/api/window/domcontentloaded_event/index.html b/files/de/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..d6841f774a --- /dev/null +++ b/files/de/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,156 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Referenz + - Web + - events +translation_of: Web/API/Window/DOMContentLoaded_event +--- +<p>Das <code>DOMContentLoaded</code>-Event wird ausgelöst, wenn das initiale HTML-Dokument vollständig geladen und geparst ist. Es wird dabei nicht auf Stylesheets, Bilder und Frames gewartet. Das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> sollte im Gegensatz dazu nur benutzt werden um eine komplett geladene Seite zu erkennen. Es ist ein weit verbreiteter Fehler das <a href="/en-US/docs/Mozilla_event_reference/load"><code>load-Event</code></a> zu benutzen, obwohl <code>DOMContentLoaded</code> wesentlich besser geeignet wäre.</p> + +<p>{{Note("Synchrones JavaScript pausiert das Parsen des DOM.")}}</p> + +<p>{{Note("Es gibt viele Bibliotheken, die Methoden bereitstellen, um bei verschiedenen Browsern zu erkennen, ob das DOM bereit ist.")}}</p> + +<h2 id="Performanz">Performanz</h2> + +<p>Wenn DOM so schnell wie möglich geladen werden soll, nachdem der Benutzer die Seite angefragt hat, sollte zum einen das <a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchron</a> ausgeführt und <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">das Laden der Stylesheets optimiert</a> werden, was bei zu häufigem Einsatz den Aufbau der Seite durch das parallele Laden verlangsamen kann.</p> + +<h2 id="Allgemeine_Informationen">Allgemeine Informationen</h2> + +<dl> + <dt style="width: 120px; text-align: right; float: left;">Specification</dt> + <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> + <dt style="width: 120px; text-align: right; float: left;">Interface</dt> + <dd style="margin: 0px 0px 0px 120px;">Event</dd> + <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja</dd> + <dt style="width: 120px; text-align: right; float: left;">Abbrechbar</dt> + <dd style="margin: 0px 0px 0px 120px;">Ja (Auch wenn es als ein einfaches Event spezifiziert ist, das nicht abgebrochen werden kann)</dd> + <dt style="width: 120px; text-align: right; float: left;">Ziel</dt> + <dd style="margin: 0px 0px 0px 120px;">Dokument</dd> + <dt style="width: 120px; text-align: right; float: left;">Standardaktion</dt> + <dd style="margin: 0px 0px 0px 120px;">Keine</dd> +</dl> + +<h2 id="Eigenschaften">Eigenschaften</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Das Zielelement des Events (das oberste Ziel im DOM Baum).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>Der Typ des Events.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt an, ob das Event weiter nach oben wandert (bubble).</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Gibt and, ob das Event abbrechbar ist.</td> + </tr> + </tbody> +</table> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); +</script> +</pre> + +<pre class="brush: html"><script> + document.addEventListener("DOMContentLoaded", function(event) { + console.log("DOM fully loaded and parsed"); + }); + +for(var i=0; i<1000000000; i++) +{} // Dieses synchrone Script wird das Parsen des DOMs verzögern. Dadurch wird das DOMContentLoaded-Event erst später ausgelöst. +</script> +</pre> + +<h2 id="Browserkompatibilität">Browserkompatibilität</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> + <td>9.0<sup>[2]</sup></td> + <td>9.0</td> + <td>3.1<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Bubbling für dieses Event benötigt mindestens Gecko 1.9.2, Chrome 6, and Safari 4.</p> + +<p>[2] Internet Explorer 8 unterstützt das <code>readystatechange</code>-Event, welches genutzt werden kann um festzustellen, wenn das DOM fertig ist. In früheren Versionen des Internet Explorers kann dieser Status festgestellt werden, indem wiederholt versucht wird, <code>document.documentElement.doScroll("left");</code> auszuführen. Dieser Befehl gibt einen Error zurück, bis das DOM bereit ist.</p> + +<h2 id="Verwandte_Events">Verwandte Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/de/web/api/window/load_event/index.html b/files/de/web/api/window/load_event/index.html new file mode 100644 index 0000000000..066a2bea25 --- /dev/null +++ b/files/de/web/api/window/load_event/index.html @@ -0,0 +1,88 @@ +--- +title: load +slug: Web/Events/load +translation_of: Web/API/Window/load_event +--- +<p>Das <code>load</code> Ereignis wird ausgelöst, sobald eine Ressource und die von ihr abhängigen Ressourcen das Laden beendet haben.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spezifikation</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Schnittstelle</dt> + <dd style="margin: 0 0 0 120px;">UIEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">bubbles</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">cancelable</dt> + <dd style="margin: 0 0 0 120px;">Nein</dd> + <dt style="float: left; text-align: right; width: 120px;">Ziel</dt> + <dd style="margin: 0 0 0 120px;">Window,Document,Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush: html"><script> + window.addEventListener("load", function(event) { + console.log("Alle Ressourcen haben das Laden beendet!"); + }); +</script> +</pre> + +<p> </p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("readystatechange")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windoworworkerglobalscope/btoa/index.html index 9d980c340a..9d980c340a 100644 --- a/files/de/web/api/windowbase64/btoa/index.html +++ b/files/de/web/api/windoworworkerglobalscope/btoa/index.html diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windoworworkerglobalscope/index.html index f51b72c102..f51b72c102 100644 --- a/files/de/web/api/windowbase64/index.html +++ b/files/de/web/api/windoworworkerglobalscope/index.html diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windoworworkerglobalscope/settimeout/index.html index 9f13870d78..9f13870d78 100644 --- a/files/de/web/api/windowtimers/settimeout/index.html +++ b/files/de/web/api/windoworworkerglobalscope/settimeout/index.html diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html deleted file mode 100644 index 67f9f76863..0000000000 --- a/files/de/web/api/windowtimers/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: WindowTimers -slug: Web/API/WindowTimers -tags: - - API - - HTML-DOM - - Interface - - NeedsTranslation - - Reference - - TopicStub - - Workers -translation_of: Web/API/WindowOrWorkerGlobalScope -translation_of_original: Web/API/WindowTimers ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><code><strong>WindowTimers</strong></code> contains utility methods to set and clear timers.</p> - -<p>There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}} for workers, implements it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface do not define any property, nor inherit any.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em>This interface do not inherit any method.</em></p> - -<dl> - <dt>{{domxref("WindowTimers.clearInterval()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.</dd> - <dt>{{domxref("WindowTimers.clearTimeout()")}}</dt> - <dd>Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.</dd> - <dt>{{domxref("WindowTimers.setInterval()")}}</dt> - <dd>Schedules the execution of a function each X milliseconds.</dd> - <dt>{{domxref("WindowTimers.setTimeout()")}}</dt> - <dd>Sets a delay for executing a function.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. No change.</td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>WindowBase64</code> (properties where on the target before it).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoDesktop(1)}}</td> - <td>1.0</td> - <td>4.0</td> - <td>4.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox Mobile (Gecko)</th> - <th>Android</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatGeckoMobile(1)}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - <td rowspan="1">{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p> </p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Window")}}, {{domxref("WorkerGlobalScope")}}, {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, and {{domxref("ServiceWorkerGlobalScope")}}</li> -</ul> |