diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2022-03-16 17:52:18 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-03-16 17:52:18 +0100 |
| commit | 500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch) | |
| tree | ca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/web/api/canvasrenderingcontext2d | |
| parent | de831e4687986c3a60b9ced69ce9faefda8df4b9 (diff) | |
| download | translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2 translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip | |
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff
* Remove u2064
* Remove u2062
* Replace u202f followed by : with :
* Replace u202f next to « or » with and « or »
* Replace u202f followed by ; with ;
* Replace u202f followed by ! with
* Replace u202f followed by ? with ?
* Replace remaining u202f with classical space
* Replace u200b surrounded by space with classical space
* Replace u200b surrounded by space with classical space - again (repeated)
* Remove remaining u200b
* Remove u200a
* Replace u2009 with
* Remove u00ad
* Replace u00a0 followed by : ! or ? with and punctuation
* Replace u00a0 surrounded « or » with and punctuation
* Replace u00a0 followed by whitespaces
* Replace u00a0 preceded by whitespaces
* Replace u00a0 followed by a newline with a newline
* Replace u00a0 followed by a newline with a newline - Take2
* Replace u00a0 followed by a ; and punctuation
* Remove u00a0 followed by ,
* Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*)
* Manual replacement of ([\u00a0])([ ]+)
* Replace remaining ([\u00a0]+) by a space
* cleaning empty elements
* remove ufe0f
* Remove u00a0 and u202f after merging against updated main
* remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/web/api/canvasrenderingcontext2d')
39 files changed, 340 insertions, 340 deletions
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 823c70dfc6..5c845f8199 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle  au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). +La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). ## Syntaxe @@ -16,19 +16,19 @@ La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajo - `x` - : La position en x du centre de l'arc. - `y` - - : La position en y du centre de l'arc. + - : La position en y du centre de l'arc. - `radius` _(rayon)_ - : Le rayon de l'arc. - `startAngle` _(angle départ)_ - - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `endAngle` _(angle fin)_ - - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `anticlockwise` _(sens anti-horaire)_ {{optional_inline}} - - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. + - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. ## Exemples -### En utilisant la méthode `arc` +### En utilisant la méthode `arc` Voici un code simple permettant de dessiner un cercle . @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -95,7 +95,7 @@ window.addEventListener("load", drawCanvas); ### Exemple avec différentes formes -Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. +Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. ```html hidden <canvas id="canvas" width="150" height="200"></canvas> @@ -133,7 +133,7 @@ for (var i = 0; i < 4; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -141,11 +141,11 @@ for (var i = 0; i < 4; i++) { ## Notes spécifiques à Gecko -Avec Gecko 2.0 {{geckoRelease("2.0")}}: +Avec Gecko 2.0 {{geckoRelease("2.0")}}: - Le paramètre `anticlockwise` est optionnel, -- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). +- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). ## Voir aussi -- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} +- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b0931493df..47e6e8bc3d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -51,8 +51,8 @@ ctx.stroke(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:200px"> // First path @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index 6a49fdd769..389259f6a1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -93,7 +93,7 @@ Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCur #### JavaScript -La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). +La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). ```js const canvas = document.getElementById("canvas"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c537047361..e515d96d0e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/canvas --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. +La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. ## Syntaxe @@ -25,7 +25,7 @@ Soit cet élément {{HTMLElement("canvas")}}: <canvas id="canvas"></canvas> ``` -Vous pouvez obtenir la référence à l'élément `canvas` grâce à  `CanvasRenderingContext2D` en utilisant la propriété `canvas` : +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : ```js var canvas = document.getElementById("canvas"); @@ -37,7 +37,7 @@ ctx.canvas // HTMLCanvasElement | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 36000420e8..59aca48a7f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. +La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. ## Syntaxe @@ -14,23 +14,23 @@ La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas me ### Paramètres - `x` - - : La coordonnée sur l'axe des *x* du point de départ du rectangle. + - : La coordonnée sur l'axe des *x* du point de départ du rectangle. - `y` - - : La coordonnée sur l'axe des *y* du point de départ du rectangle. + - : La coordonnée sur l'axe des *y* du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Notes d'utilisation -Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. +Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. ## Exemples -### Utilisation de la méthode `clearRect` +### Utilisation de la méthode `clearRect` -Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. #### HTML @@ -57,7 +57,7 @@ ctx.clearRect(10, 10, 100, 100); // ctx.clearRect(0, 0, canvas.width, canvas.height); ``` -Modifiez le code suivant et voyez vos changements en direct dans le canevas : +Modifiez le code suivant et voyez vos changements en direct dans le canevas : #### Code jouable @@ -110,7 +110,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 174105faf5..b35d863b66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. +La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. ## Syntax @@ -44,8 +44,8 @@ Editez le code ci-dessous et observez les répercutions dans le canvas: ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); @@ -88,7 +88,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 6785b0f24e..4bfb807aba 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -11,7 +11,7 @@ La méthode **`CanvasRenderingContext2D.createLinearGradient()`** de l'API Canva Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". +NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". ## Syntaxe @@ -37,7 +37,7 @@ NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors ### Utilisation de la méthode `createLinearGradient` -Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. +Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. #### HTML @@ -58,15 +58,15 @@ ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -108,7 +108,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs @@ -116,9 +116,9 @@ window.addEventListener("load", drawCanvas); ## Notes spécifiques à Gecko -- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. +- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index 2ec6290329..af4afb71ae 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} -La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. +La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. ## Syntaxe @@ -20,7 +20,7 @@ Valeurs possibles : - rtl - : La direction du texte est de droite à gauche. - inherit - - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. + - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. La valeur par défaut est `inherit`. @@ -28,7 +28,7 @@ La valeur par défaut est `inherit`. ### Utilisation de la propriété `direction` -Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. #### HTML @@ -54,8 +54,8 @@ Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <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" /> + <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'; @@ -95,7 +95,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index a24333d9f9..e2a1aff462 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. +La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. ## Syntaxe @@ -18,28 +18,28 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ### Paramètres - `image` - - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. + - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. - `dx` - - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dy` - - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dLargeur` - - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. + - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. - dHauteur - - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. + - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. - `sx` - - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sy` - - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sLargeur` - - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. + - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. - `sHauteur` - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`. ### Exceptions - `INDEX_SIZE_ERR` - - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. + - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. - `INVALID_STATE_ERR` - : L'image reçue n'en est pas une. - `TYPE_MISMATCH_ERR` @@ -47,9 +47,9 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ## Exemples -### Utiliser la méthode `drawImage` +### Utiliser la méthode `drawImage` -Ceci est un extrait de code utilisant la méthode `drawImage` : +Ceci est un extrait de code utilisant la méthode `drawImage` : #### HTML @@ -79,8 +79,8 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <img id="source" src="rhino.jpg" width="300" height="227"> </div> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> @@ -119,7 +119,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -127,16 +127,16 @@ window.addEventListener("load", drawCanvas); ## Notes concernant la compatibilité -- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. -- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. -- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. +- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. +- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. +- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. - Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas. -- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). -- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). ## Notes -- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) +- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index c95beacdff..568197aa19 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} -La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à  *angleDeDébut* et se terminant à  *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). +La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). ## Syntaxe @@ -14,27 +14,27 @@ La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajout ### Paramètres - `x` - - : La coordonnée sur l'axe des x du centre de l'ellipse. + - : La coordonnée sur l'axe des x du centre de l'ellipse. - `y` - - : La coordonnée sur l'axe des y du centre de l'ellipse. + - : La coordonnée sur l'axe des y du centre de l'ellipse. - `rayon`X - : Le rayon du grand axe de l'ellipse. - `rayon`Y - - : Le rayon du petit axe de l'ellipse. + - : Le rayon du petit axe de l'ellipse. - `rotation` - - : La rotation pour cette ellipse, exprimée en radians. + - : La rotation pour cette ellipse, exprimée en radians. - `angleDébut` - - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. + - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. - `angleFin` - - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. -- `antihoraire` {{optional_inline}} - - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. + - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. +- `antihoraire` {{optional_inline}} + - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. ## Exemples ### Utilisation de la méthode `ellipse` -Ceci est seulement un fragment de code simple dessinant une ellipse. +Ceci est seulement un fragment de code simple dessinant une ellipse. #### HTML @@ -53,15 +53,15 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -101,7 +101,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -109,4 +109,4 @@ window.addEventListener("load", drawCanvas); ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index 6d79084923..fb140f74ea 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -53,8 +53,8 @@ ctx.fill(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -125,8 +125,8 @@ ctx.stroke(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -176,7 +176,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index 734483f27d..f8d39d617b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. +La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas d ### Paramètres - `x` - - : L'ordonnée *x* des coordonnées du point de départ du rectangle. + - : L'ordonnée *x* des coordonnées du point de départ du rectangle. - `y` - - : L'abscisse *y* des coordonnées du point de départ du rectangle. + - : L'abscisse *y* des coordonnées du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `fillRect` +### Utilisation de la méthode `fillRect` -Ceci est juste un extrait de code qui utilise la méthode `fillRect`. +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. #### HTML @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = "green"; @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index a55ea78000..e81260b93d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; @@ -116,7 +116,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 182d5aa7fe..318b310357 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -21,10 +21,10 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour <!----> - `x` - - : La valeur de la coordonnée sur l'axe des x du point de début du texte. + - : La valeur de la coordonnée sur l'axe des x du point de début du texte. - `y` - - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. -- `largeurMax` {{optional_inline}} + - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. +- `largeurMax` {{optional_inline}} - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police. ## Exemples @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps ```html hidden <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" /> + <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"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 872b25996a..161f3e3ec2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -38,15 +38,15 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <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" /> + <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'; @@ -97,7 +97,7 @@ f.load().then(function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index fc1acc270a..b85a69358f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un  objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. +La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées. @@ -27,28 +27,28 @@ Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs ### Paramètres - `sx` - - : La coordonnée x du coin supérieur gauche du rectangle à  partir duquel _ImageData_ sera extrait. + - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. - `sy` - - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. + - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. - `sw` - - : La largeur du rectangle à partir duquel *ImageData* sera extrait. + - : La largeur du rectangle à partir duquel *ImageData* sera extrait. - `sh` - - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. + - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. ### Valeur retournée -Un objet {{domxref("ImageData")}}  contenant les données de l'image pour le rectangle donné du canevas. +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. ### Erreurs renvoyées - `IndexSizeError` - - : Renvoyé si l'un des arguments de  largeur ou de hauteur est égal à zéro. + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. ## Exemples -### Utilisation de la méthode  `getImageData` +### Utilisation de la méthode `getImageData` -Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. +Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. #### HTML diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index cedbd7eaa0..d7c32d2d8a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,9 +18,9 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canv ## Exemples -### Utilisation de la propriété `globalAlpha` +### Utilisation de la propriété `globalAlpha` -Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. #### HTML @@ -50,8 +50,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacement" type="button" value="Effacement" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> </div> <textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; @@ -91,9 +91,9 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 380) }} -### Un exemple de `globalAlpha` +### Un exemple de `globalAlpha` -Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. +Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -130,7 +130,7 @@ for (i = 0; i < 7; i++){ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -138,7 +138,7 @@ for (i = 0; i < 7; i++){ ## Notes spécifiques à Gecko -- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. +- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. ## Notes spécifiques à WebKit/Blink diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 4383ac79e0..8165774d92 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -5,21 +5,21 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. +La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). ## Syntaxe ctx.globalCompositeOperation = type; -`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. ## Exemples ### Changer l'opération de composition -Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. #### HTML @@ -59,12 +59,12 @@ ctx.fillRect(50, 50, 100, 100); ### Remarques concernant WebKit/Blink -- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. -- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. +- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. +- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. ### Remarques concernant Gecko -- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à  `"darker"`. +- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 3ab0e43267..b71d53bfab 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} -La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. +La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. -Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. +Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. ## Syntaxe @@ -16,7 +16,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise ### Options - `valeur` - - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. ## Exemples @@ -66,7 +66,7 @@ img.onload = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -74,5 +74,5 @@ img.onload = function() { ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{cssxref("image-rendering")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md index f6ab561009..5351d735c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -10,37 +10,37 @@ translation_of: Web/API/CanvasRenderingContext2D --- {{APIRef}} -L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. +L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. -Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : +Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> var ctx = canevas.getContext('2d'); -Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : +Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 -Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. +Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. -## Dessin de rectangles +## Dessin de rectangles -Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. +Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. - {{domxref("CanvasRenderingContext2D.clearRect()")}} - - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à  noir transparent, en effaçant tout contenu précédemment dessiné. + - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. - {{domxref("CanvasRenderingContext2D.fillRect()")}} - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_. - {{domxref("CanvasRenderingContext2D.strokeRect()")}} - - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. + - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. ## Dessiner du texte Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte. - {{domxref("CanvasRenderingContext2D.fillText()")}} - - : Dessine (rempli) un texte donné à la position (x,y) donnée. + - : Dessine (rempli) un texte donné à la position (x,y) donnée. - {{domxref("CanvasRenderingContext2D.strokeText()")}} - : Dessine (contour) un texte donné à la position (x, y) donnée. - {{domxref("CanvasRenderingContext2D.measureText()")}} @@ -53,9 +53,9 @@ Les méthodes et propriétés suivantes controllent comment les lignes sont dess - {{domxref("CanvasRenderingContext2D.lineWidth")}} - : Largeur des lignes. Défaut `1.0` - {{domxref("CanvasRenderingContext2D.lineCap")}} - - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. + - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. - {{domxref("CanvasRenderingContext2D.lineJoin")}} - - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). + - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). - {{domxref("CanvasRenderingContext2D.miterLimit")}} - : Le taux limite du miter. Sa valeur par défaut est `10`. - {{domxref("CanvasRenderingContext2D.getLineDash()")}} @@ -72,20 +72,20 @@ Les propriétés suivantes contrôlent la manière dont le texte est rendu à lâ - {{domxref("CanvasRenderingContext2D.font")}} - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`. - {{domxref("CanvasRenderingContext2D.textAlign")}} - - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. + - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. - {{domxref("CanvasRenderingContext2D.textBaseline")}} - - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. + - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. - {{domxref("CanvasRenderingContext2D.direction")}} - - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). + - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). ## Fill and stroke styles Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. - {{domxref("CanvasRenderingContext2D.fillStyle")}} - - : Color or style to use inside shapes. Default `#000` (black). + - : Color or style to use inside shapes. Default `#000` (black). - {{domxref("CanvasRenderingContext2D.strokeStyle")}} - - : Color or style to use for the lines around shapes. Default `#000` (black). + - : Color or style to use for the lines around shapes. Default `#000` (black). ## Gradients and patterns @@ -99,7 +99,7 @@ Fill styling is used for colors and styles inside shapes and stroke styling is u ## Shadows - {{domxref("CanvasRenderingContext2D.shadowBlur")}} - - : Specifies the blurring effect. Default `0` + - : Specifies the blurring effect. Default `0` - {{domxref("CanvasRenderingContext2D.shadowColor")}} - : Color of the shadow. Default fully-transparent black. - {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} @@ -116,19 +116,19 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.closePath()")}} - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. - {{domxref("CanvasRenderingContext2D.moveTo()")}} - - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. - {{domxref("CanvasRenderingContext2D.lineTo()")}} - - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. - {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}} - - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}} - : Adds a quadratic Bézier curve to the current path. - {{domxref("CanvasRenderingContext2D.arc()")}} - - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.arcTo()")}} - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. - {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}} - - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.rect()")}} - : Creates a path for a rectangle at position *(x, y)* with a size that is determined by *width* and *height*. @@ -143,7 +143,7 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} - : Scrolls the current path or a given path into the view. - {{domxref("CanvasRenderingContext2D.clip()")}} - - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. + - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. - {{domxref("CanvasRenderingContext2D.isPointInPath()")}} - : Reports whether or not the specified point is contained in the current path. - {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} @@ -151,7 +151,7 @@ The following methods can be used to manipulate paths of objects. ## Transformations -Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. +Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. - {{domxref("CanvasRenderingContext2D.currentTransform")}} - : Current transformation matrix ({{domxref("SVGMatrix")}} object). @@ -164,16 +164,16 @@ Objects in the `CanvasRenderingContext2D` rendering context have a current tra - {{domxref("CanvasRenderingContext2D.transform()")}} - : Multiplies the current transformation matrix with the matrix described by its arguments. - {{domxref("CanvasRenderingContext2D.setTransform()")}} - - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. + - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. - {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}} - : Resets the current transform by the identity matrix. ## Compositing - {{domxref("CanvasRenderingContext2D.globalAlpha")}} - - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). + - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). - {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} - - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. ## Drawing images @@ -187,7 +187,7 @@ See also the {{domxref("ImageData")}} object. - {{domxref("CanvasRenderingContext2D.createImageData()")}} - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black. - {{domxref("CanvasRenderingContext2D.getImageData()")}} - - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. + - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. - {{domxref("CanvasRenderingContext2D.putImageData()")}} - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. @@ -198,12 +198,12 @@ See also the {{domxref("ImageData")}} object. ## The canvas state -The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: +The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: - {{domxref("CanvasRenderingContext2D.save()")}} - - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. + - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. - {{domxref("CanvasRenderingContext2D.restore()")}} - - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. + - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. - {{domxref("CanvasRenderingContext2D.canvas")}} - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. @@ -212,7 +212,7 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Adds a hit region to the canvas. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Removes the hit region with the specified `id` from the canvas. + - : Removes the hit region with the specified `id` from the canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Removes all hit regions from the canvas. @@ -220,49 +220,49 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing ### Blink and WebKit -Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). +Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). -- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}. -- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` - - : This is redundant with an equivalent overload of `drawImage`. -- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` +- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` + - : This is redundant with an equivalent overload of `drawImage`. +- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead. ### Blink only -- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` - - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. +- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` + - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. ### WebKit only -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` - - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` + - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. <!----> @@ -274,40 +274,40 @@ Most of these APIs are [deprecated and will be removed in the future](https://c #### Prefixed APIs -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` - - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` - - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` + - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` + - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. -- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` +- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. #### Internal APIs (chrome-context only) - {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}} - - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. -- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` + - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. +- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. ### Internet Explorer -- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` - - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). +- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` + - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). ## Specifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index e3666e004c..c9a7280458 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} -La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. +La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,17 +18,17 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Can ### Options - `butt` - - : Les extrémités de ligne sont coupées à angle droit. + - : Les extrémités de ligne sont coupées à angle droit. - `round` - - : Les extrémités de ligne sont arrondies. + - : Les extrémités de ligne sont arrondies. - `square` - - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. + - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. ## Exemples ### Utilisation de la propriété `lineCap` -Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. +Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. #### HTML @@ -57,8 +57,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -97,11 +97,11 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Un exemple de `lineCap` +### Un exemple de `lineCap` Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides. -La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. +La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -138,7 +138,7 @@ for (var i = 0; i < lineCap.length; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -146,7 +146,7 @@ for (var i = 0; i < lineCap.length; i++) { ## Notes spécifiques à WebKit/Blink -- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. +- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index e4fd4f8c90..bdf847455b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -9,7 +9,7 @@ La propriété **`CanvasRenderingContext2D.lineJoin`** de l'API Canvas 2D déter Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés. -> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. ## Syntaxe @@ -26,7 +26,7 @@ Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et ` - `"bevel"` (biseau) - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés. - `"miter"` (onglet) - - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. + - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. ## Exemples diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 8b1b3dbffa..83bca52b28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). +La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte ## Exemples -### Utilisation de la méthode `lineTo` +### Utilisation de la méthode `lineTo` -Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. +Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. #### HTML @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index 94926366d7..04ccaf4bde 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). +La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). ## Syntaxe @@ -20,21 +20,21 @@ La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domx ### Paramètres - texte - - : Le texte à  mesurer. + - : Le texte à mesurer. ### Valeur retournée -Un objet {{domxref("TextMetrics")}}. +Un objet {{domxref("TextMetrics")}}. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canevas = document.getElementById('canevas'); @@ -48,7 +48,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index ca5dd0ebcf..09f3ff11e7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index cf51e85850..a2e331d491 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -98,7 +98,7 @@ contexte2D.stroke(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 91d1080833..fbaf106ba3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -50,8 +50,8 @@ ctx.fill(); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index dd43fde3e5..6269d2e8da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -16,15 +16,15 @@ La méthode **`CanvasRenderingContext2D.rotate()`** de l'API Canvas 2D ajoute un ### Paramètres - `angle` - - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. + - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. -Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. +Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. ## Exemples ### Utilisation de la méthode `rotate` -Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(70, 0, 100, 30); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index 69be186f58..6b577b126f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} -La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. +La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. -Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à  2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. +Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. ## Syntaxe @@ -16,15 +16,15 @@ Par défaut, une unité sur le canevas est exactement un pixel. Si on appliqu ### Paramètres - `x` - - : Facteur d'échelle dans la direction horizontale. + - : Facteur d'échelle dans la direction horizontale. - y - - : Facteur d'échelle dans la direction verticale. + - : Facteur d'échelle dans la direction verticale. ## Exemples ### Utilisation de la méthode `scale` -Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(10, 10, 10, 10); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(10, 3); @@ -89,7 +89,7 @@ window.addEventListener("load", drawCanvas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Utilisation de `scale` pour un retournement horizontal ou vertical +### Utilisation de `scale` pour un retournement horizontal ou vertical Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1)` pour le retourner verticalement. @@ -98,8 +98,8 @@ Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontaleme ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(-1, 1); @@ -140,7 +140,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 85d5078d2c..436f19da6b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} -La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. +La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. -> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. ## Syntaxe @@ -16,7 +16,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ### Paramètres - `segments` - - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. + - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. ### Valeur de retour @@ -24,7 +24,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ## Exemples -C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. +C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. ### HTML @@ -53,15 +53,15 @@ ctx.stroke(); ### Essayez le -Editez le code ci-dessous et observez les changements se produire dans le canvas: +Editez le code ci-dessous et observez les changements se produire dans le canvas: #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); @@ -109,19 +109,19 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navivgateurs {{Compat("api.CanvasRenderingContext2D.setLineDash")}} -## Notes spécifiques pour Gecko +## Notes spécifiques pour Gecko -- Depuis  Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. +- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. -## Notes spécifiques pour WebKit +## Notes spécifiques pour WebKit -- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. +- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index cc123acdaa..50ff4a46b8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à  la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. +La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. ## Syntaxe void ctx.setTransform(a, b, c, d, e, f); -La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> +La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> ### Paramètres @@ -32,9 +32,9 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</ ## Exemples -### Utilisation de la méthode `setTransform` +### Utilisation de la méthode `setTransform` -Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. #### HTML @@ -52,15 +52,15 @@ ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 24925f1d01..6e92744b06 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -45,8 +45,8 @@ Editer le code en dessous et voir vos modifications mises à jour en direct dans ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -85,7 +85,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index e5cc41b3c5..1dadb9ebb1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. +La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas ### Paramètres - `x` - - : L'abcisse *x* des coordonnées du point de départ du rectangle. + - : L'abcisse *x* des coordonnées du point de départ du rectangle. - `y` - : L'ordonnée _y_ des coordonnées du point de départ du rectangle. - largeur - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `strokeRect` +### Utilisation de la méthode `strokeRect` -Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. #### HTML @@ -51,8 +51,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index aab6253a44..8bf5d7ea28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -53,8 +53,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; @@ -119,7 +119,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 2f7db41cd4..f687b2b396 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. +La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. ## Syntaxe @@ -16,22 +16,22 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour ### Paramètres - `texte` - - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. + - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. <!----> - `x` - - : La coordonnée sur l'axe des x du point de départ du texte. + - : La coordonnée sur l'axe des x du point de départ du texte. - `y` - - : La coordonnée sur l'axe des y du point de départ du texte. -- `largeurMax` {{optional_inline}} - - : La largeur maximum à dessiner.  Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à  l'échelle horizontalement la police courante), ou une police plus petite. + - : La coordonnée sur l'axe des y du point de départ du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. ## Exemples -### Utilisation de la méthode `strokeText` +### Utilisation de la méthode `strokeText` -Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <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" /> + <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"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index 4e15fd41b9..45f2a8b340 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. +La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. ## Syntaxe @@ -22,17 +22,17 @@ Valeurs possibles : - center - : Le texte est centré. - start - - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). - end - - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). -La valeur pa défaut est `start`. +La valeur pa défaut est `start`. ## Exemples ### Utilisation de la propriété `textAlign` -Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. #### HTML @@ -58,8 +58,8 @@ Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <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" /> + <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'; @@ -99,7 +99,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index d43cb1f77a..b543074551 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. +La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. ## Syntaxe @@ -20,21 +20,21 @@ Valeurs possibles : - hanging - : La ligne de base du texte est la ligne de base supérieure. - middle - - : La ligne de base du texte est le milieu du cadratin. + - : La ligne de base du texte est le milieu du cadratin. - alphabetic - - : La ligne de base du texte est la ligne de base normale alphabétique. + - : La ligne de base du texte est la ligne de base normale alphabétique. - ideographic - - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. + - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. - bottom - - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. + - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. -La valeur par défaut est `alphabetic`. +La valeur par défaut est `alphabetic`. ## Exemples ### Utilisation de la propritété `textBaseline` -Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. +Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. #### HTML @@ -53,15 +53,15 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <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" /> + <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'; @@ -101,7 +101,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index e3ac8f2edd..d3be535ddd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} -La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. +La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. -Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. ## Syntaxe @@ -34,7 +34,7 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo ### Utilisation de la méthode `transform` -Ceci est seulement un fragment de code simple utilisant la méthode `transform`. +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. #### HTML @@ -59,8 +59,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 2c38c52591..cdbe0ad12b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} -La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. +La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. ## Syntaxe @@ -16,15 +16,15 @@ La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute u ### Paramètres - `x` - - : Distance de déplacement dans le sens horizontal. + - : Distance de déplacement dans le sens horizontal. - y - - : Distance de déplacement dans le sens vertical. + - : Distance de déplacement dans le sens vertical. ## Exemples ### Utilisation de la méthode `translate` -Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(0, 0, 100, 100); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : #### Code jouable ```html hidden <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" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.translate(50, 50); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs |