diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/canvas_api/tutorial/optimizing_canvas | |
parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip |
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids
* Remove unecessary hidden
* Remove useless span filled with useless attributes / ids
* Remove useless font
* Remove notranslate
* Remove id in other elements than headings
* Remove name attributes
* Remove <pre><code> for JS w/ language-js class
* Remove <pre><code> for HTML w/ language-html class
* Remove <pre><code> for other lang w/ language-* class
* Rm highlighted line in code samples
* fix links, internal, external, absolute URLs
* missing file from last commit
* Fix styles errors apart from table + some classes
* Fix notes and warnings (+ some other :x)
* fix typo during merge which broke a doc
* aand forgot a conflict
* fix remaining classes of errors except dls and images
* Fix dls
* Fix images (deki/mozillademos) and remaining style issues
* Remove script tag from svg file
* Remove script tag from svg fileS
* Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/canvas_api/tutorial/optimizing_canvas')
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html | 14 |
1 files changed, 6 insertions, 8 deletions
diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html index 4d7f4358d2..700966e07c 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -6,9 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/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>L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien.</p> -</div> <h2 id="Conseils_sur_les_performances">Conseils sur les performances</h2> @@ -18,7 +16,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas <p>Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue.</p> -<pre class="brush: js notranslate">myEntity.offscreenCanvas = document.createElement("canvas"); +<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"); @@ -30,7 +28,7 @@ myEntity.render(myEntity.offscreenContext); <p>Un rendu de sous-pixel est opéré quand on dessine des objets sur un canvas sans valeur entière.</p> -<pre class="brush: js notranslate">ctx.drawImage(myImage, 0.3, 0.5); +<pre class="brush: js">ctx.drawImage(myImage, 0.3, 0.5); </pre> <p>Cela pousse le navigateur à faire des calculs supplémentaires pour créer un effet d'anti-crénelage. Pour empêcher cela, il faut s'assurer d'arrondir les coordonnées utilisées pour {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}.</p> @@ -45,7 +43,7 @@ myEntity.render(myEntity.offscreenContext); <p>Par exemple, on peut créer un calque UI, dessiné au-dessus de tous les autres uniquement lorsque l'utilisateur accède à un menu. En dessous, un calque <em>jeu</em> où les entités du jeu sont souvent mises à jour. Et, à l'arrière, un calque de fond rarement modifié.</p> -<pre class="brush: html notranslate"><div id="stage"> +<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> @@ -73,7 +71,7 @@ myEntity.render(myEntity.offscreenContext); <p><a href="/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS">Les transformations CSS</a> sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.</p> -<pre class="brush: js notranslate">var scaleX = window.innerWidth / canvas.width; +<pre class="brush: js">var scaleX = window.innerWidth / canvas.width; var scaleY = window.innerHeight / canvas.height; var scaleToFit = Math.min(scaleX, scaleY); @@ -87,7 +85,7 @@ stage.style.transform = "scale(" + scaleToFit + ")"; <p>Si le canvas n'a pas besoin de transparence, ajouter l'attribut <code>moz-opaque</code> dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.</p> -<pre class="brush: html notranslate"><canvas id="mycanvas" moz-opaque></canvas></pre> +<pre class="brush: html"><canvas id="mycanvas" moz-opaque></canvas></pre> <h3 id="Dautres_conseils">D'autres conseils</h3> @@ -100,7 +98,7 @@ stage.style.transform = "scale(" + scaleToFit + ")"; <li>Essayer différents moyens d'effacer le canvas : ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. redimensionner le canevas).</li> <li>Avec les animations, utiliser {{domxref("window.requestAnimationFrame()")}} plutôt que {{domxref("window.setInterval()")}}.</li> <li>Faire attention aux bibliothèques physiques lourdes.</li> - <li>Tester les performances avec <a href="http://jsperf.com" title="http://jsperf.com">JSPerf</a>.</li> + <li>Tester les performances avec <a href="http://jsperf.com">JSPerf</a>.</li> </ul> <h2 id="Voir_aussi">Voir aussi</h2> |