unslug de: move

1 files changed, 118 insertions, 0 deletions

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">&lt;div id="stage"&gt;
+  &lt;canvas id="ui-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="game-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+  &lt;canvas id="background-layer" width="480" height="320"&gt;&lt;/canvas&gt;
+&lt;/div&gt;
+
+&lt;style&gt;
+  #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 }
+&lt;/style&gt;
+</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">&lt;canvas id="myCanvas" moz-opaque&gt;&lt;/canvas&gt;</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>