diff options
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.md | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 7b3b723efb..ded7ba9431 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -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. +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. ## Conseils sur les performances Ceci est une liste de conseils pour améliorer les performances -### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ 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. @@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, prà ### Redimensionner les canvas avec CSS transform -[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) 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. +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) 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. ```js var scaleX = window.innerWidth / canvas.width; @@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; ``` -### Utiliser l'attribut `moz-opaque` (Gecko only) +### Utiliser l'attribut `moz-opaque` (Gecko only) Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. |