diff options
Diffstat (limited to 'files/fr/web/api/canvasrenderingcontext2d')
40 files changed, 2340 insertions, 2889 deletions
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index d51cb083df..0656bd50da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -8,67 +8,70 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/arc --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p> +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). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var> -</pre> + void ctx.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La position en x du centre de l'arc.</dd> - <dt><code>y</code></dt> - <dd>La position en y du centre de l'arc.</dd> - <dt><code>radius</code><em> (rayon)</em></dt> - <dd>Le rayon de l'arc.</dd> - <dt><code>startAngle</code> <em>(angle départ)</em></dt> - <dd>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.</dd> - <dt><code>endAngle</code> <em>(angle fin)</em></dt> - <dd>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.</dd> - <dt><code>anticlockwise</code><em> (sens anti-horaire)</em> {{optional_inline}}</dt> - <dd>Un {{jsxref("Booléen")}} facultatif qui, si à <code>true</code><em>(vrai),</em> 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.</dd> -</dl> +- `x` + - : La position en x du centre de l'arc. +- `y` + - : 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. +- `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. +- `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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> +### En utilisant la méthode `arc` -<p>Voici un code simple permettant de dessiner un cercle .</p> +Voici un code simple permettant de dessiner un cercle . -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html line-numbers"><canvas id="canvas"></canvas></pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); -ctx.stroke();</pre> +ctx.stroke(); +``` -<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p> +Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.arc(50, 50, 50, 0, 2 * Math.PI, false); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -91,25 +94,25 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> -</div> +``` -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +{{ EmbedLiveSample('Playable_code', 700, 360) }} -<h3 id="Different_shapes_demonstrated">Exemple avec différentes formes</h3> +### Exemple avec différentes formes -<p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p> +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> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="200"></canvas> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw shapes -for (var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { +for (var i = 0; i < 4; i++) { + for(var j = 0; j < 3; j++) { ctx.beginPath(); var x = 25 + j * 50; // x coordinate var y = 25 + i * 50; // y coordinate @@ -120,48 +123,34 @@ for (var i = 0; i < 4; i++) { ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); - if (i > 1) { + if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } -}</pre> +} +``` -<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p> +{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p> +{{Compat("api.CanvasRenderingContext2D.arc")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p> +Avec Gecko 2.0 {{geckoRelease("2.0")}}: -<ul> - <li>Le paramètre <code>anticlockwise</code> est optionnel,</li> - <li>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" ).</li> -</ul> +- 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" ). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- 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 e59e5be4a4..b663d63dd6 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -7,29 +7,30 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/beginPath --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.beginPath()`\** de l'API Canvas 2D permet de commencer un nouveau chemin *e\*n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var> -</pre> + void ctx.beginPath(); -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3> +### Utiliser la méthode `beginPath` -<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p> +Ceci est un simple snippet de code qui utilise la méthode `beginPath`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Premier chemin @@ -45,18 +46,19 @@ ctx.strokeStyle = 'green'; ctx.moveTo(20, 20); ctx.lineTo(120, 120); ctx.stroke(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p> +Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code" style="height:200px"> +```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" /> +</div> +<textarea id="code" class="playable-code" style="height:200px"> // First path ctx.beginPath(); ctx.strokeStyle = 'blue'; @@ -69,10 +71,11 @@ ctx.beginPath(); ctx.strokeStyle = 'green'; ctx.moveTo(20,20); ctx.lineTo(120, 120); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,34 +98,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 460) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 460) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p> +{{Compat("api.CanvasRenderingContext2D.beginPath")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> -</ul> +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.closePath()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index f5e140589e..eb9c087775 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -4,47 +4,46 @@ slug: Web/API/CanvasRenderingContext2D/bezierCurveTo translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo browser-compat: api.CanvasRenderingContext2D.bezierCurveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D.bezierCurveTo()</strong></code> de l'API Canvas 2D ajoute une <a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode <a href="/fr/docs/Web/API/CanvasRenderingContext2D/moveTo"><code>moveTo()</code></a> avant de créer une courbe de Bézier.</p> +La méthode **`CanvasRenderingContext2D.bezierCurveTo()`** de l'API Canvas 2D ajoute une [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode [`moveTo()`](/fr/docs/Web/API/CanvasRenderingContext2D/moveTo) avant de créer une courbe de Bézier. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush: js">void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); -</pre> +```js +void ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); +``` -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>cp1x</code></dt> - <dd>L'abscisse du premier point de contrôle.</dd> - <dt><code>cp1y</code></dt> - <dd>L'ordonnée du premier point de contrôle.</dd> - <dt><code>cp2x</code></dt> - <dd>L'abscisse du second point de contrôle.</dd> - <dt><code>cp2y</code></dt> - <dd>L'ordonnée du second point de contrôle.</dd> - <dt><code>x</code></dt> - <dd>L'abscisse du point d'arrivée.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée du point d'arrivée.</dd> -</dl> +- `cp1x` + - : L'abscisse du premier point de contrôle. +- `cp1y` + - : L'ordonnée du premier point de contrôle. +- `cp2x` + - : L'abscisse du second point de contrôle. +- `cp2y` + - : L'ordonnée du second point de contrôle. +- `x` + - : L'abscisse du point d'arrivée. +- `y` + - : L'ordonnée du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="how_beziercurveto_works">Fonctionnement de bezierCurveTo()</h3> +### Fonctionnement de bezierCurveTo() -<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p> +Cet exemple montre comment une courbe cubique de Bézier est dessinée. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"> -<canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js;"> +```js // Define canvas and context const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); @@ -74,52 +73,51 @@ ctx.beginPath(); ctx.arc(cp1.x, cp1.y, 5, 0, 2 * Math.PI); // Point de contrôle n°1 ctx.arc(cp2.x, cp2.y, 5, 0, 2 * Math.PI); // Point de contrôle n°2 ctx.fill(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus.</p> +Dans cet exemple, les points de contrôle sont rouges et les points de départ et d'arrivée sont bleus. -<p>{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}}</p> +{{EmbedLiveSample('how_beziercurveto_works', 315, 165)}} -<h3 id="a_simple_bezier_curve">Une courbe cubique de Bézier simple</h3> +### Une courbe cubique de Bézier simple -<p>Cet exemple dessine une courbe cubique de Bézier simple en utilisant <code>bezierCurveTo()</code>.</p> +Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCurveTo()`. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"> -<canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>La courbe débute au point spécifié par <code>moveTo()</code> : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140).</p> +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). -<pre class="brush: js"> +```js const canvas = document.getElementById("canvas"); const contexte2D = canvas.getContext("2d"); contexte2D.beginPath(); contexte2D.moveTo(30, 30); contexte2D.bezierCurveTo(120,160, 180,10, 220,140); -contexte2D.stroke();</pre> +contexte2D.stroke(); +``` -<h4 id="result_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}}</p> +{{EmbedLiveSample('a_simple_bezier_curve', 700, 180)}} -<h2 id="specifications">Spécifications</h2> +## Spécifications -<p>{{Specifications}}</p> +{{Specifications}} -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat}}</p> +{{Compat}} -<h2 id="see_also">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface définissant cette méthode : <a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a></li> - <li><a href="https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier">L'article Wikipédia sur les courbes de Bézier</a></li> -</ul> +- L'interface définissant cette méthode : [`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D) +- [L'article Wikipédia sur les courbes de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier) diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c548b4ed9e..c537047361 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -9,51 +9,40 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/canvas --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> 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")}}.</p> +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")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + ctx.canvas; -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Soit cet élément {{HTMLElement("canvas")}}:</p> +Soit cet élément {{HTMLElement("canvas")}}: -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p> +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.canvas // HTMLCanvasElement -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>{{domxref("CanvasRenderingContext2D")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.canvas")}} + +## Voir aussi + +- {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 7bf854557e..f11c76ec20 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -9,46 +9,45 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/clearRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> 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 <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p> +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é. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.clearRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd> - <dt><code>largeur</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : 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. +- `largeur` + - : La largeur du rectangle. +- `hauteur` + - : La hauteur de rectangle. -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +## Notes d'utilisation -<p>Un problème classique avec <code>clearRect</code> est qu'il peut apparaître comme ne fonctionnant pas si l'on n'<a href="/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths">utilise pas les trajets de façon appropriée</a>. N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé <code>clearRect</code>.</p> +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`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3> +### Utilisation de la méthode `clearRect` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById("canvas"); +```js +var canevas = document.getElementById("canvas"); var ctx = canevas.getContext("2d"); ctx.beginPath(); @@ -62,18 +61,19 @@ ctx.clearRect(10, 10, 100, 100); // effacer le canevas entièrement // ctx.clearRect(0, 0, canvas.width, canvas.height); -</pre> +``` -<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p> +Modifiez le code suivant et voyez vos changements en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code" style="height:140px;"> +```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" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); @@ -81,10 +81,11 @@ ctx.lineTo(120,120); ctx.closePath(); // dessine la dernière ligne du triangle ctx.stroke(); -ctx.clearRect(10, 10, 100, 100);</textarea> -</pre> +ctx.clearRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -107,35 +108,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 400) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.clearRect")}} + +## Voir aussi + +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillRect()")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index ee83dd8db5..73798baafa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,29 +5,30 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/closePath --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> 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.</p> +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. -<h2 id="Syntax">Syntax</h2> +## Syntax -<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var> -</pre> + void ctx.closePath(); -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3> +### Utiliser la méthode `closePath` -<p>Voici un exemple d'utilisation de la méthode closePath.</p> +Voici un exemple d'utilisation de la méthode closePath. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -36,27 +37,29 @@ ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // ferme le triangle par une ligne droite ctx.stroke(); -</pre> +``` -<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p> +Editez le code ci-dessous et observez les répercutions dans le canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code" style="height:140px;"> +```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" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.lineTo(120,120); ctx.closePath(); // draws last line of the triangle -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -79,34 +82,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 400) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.closePath")}}</p> +{{Compat("api.CanvasRenderingContext2D.closePath")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> -</ul> +- The interface defining it, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.beginPath()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index d8bab917a3..3fe6679a76 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -10,55 +10,52 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.createLinearGradient()</code></strong> de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.createLinearGradient()`\*\* de l'API Canvas 2D crée un gradient le long de la ligne donnée par les coordonnées représentées par les paramètres. -<p><img alt="" src="mdn-canvas-lineargradient.png"></p> + -<p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p> +Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -<p>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".</p> +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". -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var> -</pre> + CanvasGradient ctx.createLinearGradient(x0, y0, x1, y1); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x0</code></dt> - <dd>La coordonnée sur l'axe des x du point de début.</dd> - <dt><code>y0</code></dt> - <dd>La coordonnée sur l'axe des y du point de début.</dd> - <dt><code>x1</code></dt> - <dd>La coordonnée sur l'axe des x du point de fin.</dd> - <dt><code>y1</code></dt> - <dd>La coordonnée sur l'axe des y du point de fin.</dd> -</dl> +- `x0` + - : La coordonnée sur l'axe des x du point de début. +- `y0` + - : La coordonnée sur l'axe des y du point de début. +- `x1` + - : La coordonnée sur l'axe des x du point de fin. +- `y1` + - : La coordonnée sur l'axe des y du point de fin. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<dl> - <dt>{{domxref("CanvasGradient")}}</dt> - <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd> -</dl> +- {{domxref("CanvasGradient")}} + - : Un `CanvasGradient linéaire` initialisé avec la ligne spécifiée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3> +### Utilisation de la méthode `createLinearGradient` -<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> 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.</p> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); @@ -66,26 +63,28 @@ gradient.addColorStop(0, 'green'); gradient.addColorStop(1, 'white'); ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,"green"); gradient.addColorStop(1,"white"); ctx.fillStyle = gradient; -ctx.fillRect(10,10,200,100);</textarea> -</pre> +ctx.fillRect(10,10,200,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -108,40 +107,25 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> +{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li> -</ul> +- 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`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> -</ul> +- 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 e4dae769e1..b56729678a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -10,67 +10,68 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/direction --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.direction`\*\* de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var> -</pre> + ctx.direction = "ltr" || "rtl" || "inherit"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>ltr</dt> - <dd>La direction du texte est de gauche à droite.</dd> - <dt>rtl</dt> - <dd>La direction du texte est de droite à gauche.</dd> - <dt>inherit</dt> - <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd> -</dl> +- ltr + - : La direction du texte est de gauche à droite. +- 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é. -<p>La valeur par défaut est <code>inherit</code>.</p> +La valeur par défaut est `inherit`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> +### Utilisation de la propriété `direction` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>direction</code> pour indiquer un réglage de ligne de base différent.</p> +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.direction = 'ltr'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.direction = 'ltr'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -93,33 +94,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{EmbedLiveSample('code_jouable', 700, 360)}}</p> +{{EmbedLiveSample('code_jouable', 700, 360)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p> +{{Compat("api.CanvasRenderingContext2D.direction")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index 92bc5a9b9d..e7bb8508f3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -9,92 +9,91 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/drawImage --- -<div>{{APIRef}}</div> - -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var> -void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var> -void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var> -</pre> - -<p><img alt="drawImage" src="canvas_drawimage.jpg"></p> - -<h3 id="Paramètres">Paramètres</h3> - -<dl> - <dt><code>image</code></dt> - <dd>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")}}.</dd> - <dt><code>dx</code></dt> - <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> - <dt><code>dy</code></dt> - <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> - <dt><code>dLargeur</code></dt> - <dd>La largeur de l'<code>image</code> 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.</dd> - <dt>dHauteur</dt> - <dd>La hauteur de l'<code>image</code> 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.</dd> - <dt><code>sx</code></dt> - <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> - <dt><code>sy</code></dt> - <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> - <dt><code>sLargeur</code></dt> - <dd>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 <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd> - <dt><code>sHauteur</code></dt> - <dd>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 <code>sy</code>.</dd> -</dl> - -<h3 id="Exceptions">Exceptions</h3> - -<dl> - <dt><code>INDEX_SIZE_ERR</code></dt> - <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd> - <dt><code>INVALID_STATE_ERR</code></dt> - <dd>L'image reçue n'en est pas une.</dd> - <dt><code>TYPE_MISMATCH_ERR</code></dt> - <dd>L'image reçue n'est pas supportée.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3> - -<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><canvas id="canvas"></canvas> - <img id="source" src="rhino.jpg" - width="300" height="227"> -</div> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -var image = document.getElementById("source"); +{{APIRef}} -ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); -</pre> +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 + + void ctx.drawImage(image, dx, dy); + void ctx.drawImage(image, dx, dy, dLargeur, dHauteur); + void ctx.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur); + + + +### 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")}}. +- `dx` + - : 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. +- `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. +- 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. +- `sx` + - : 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. +- `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. +- `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 -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +- `INDEX_SIZE_ERR` + - : 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` + - : L'image reçue n'est pas supportée. -<h4 id="code_jouable">Code jouable</h4> +## Exemples -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> - <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" /> -</div> -<textarea id="code" class="playable-code"> -ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> -</pre> +### Utiliser la méthode `drawImage` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +Ceci est un extrait de code utilisant la méthode `drawImage` : + +#### HTML + +```html +<canvas id="canvas"></canvas> + <img id="source" src="rhino.jpg" + width="300" height="227"> +</div> +``` + +#### JavaScript + +```js +var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById("source"); + +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); +``` + +Éditez le code suivant pour voir les changements en direct dans la balise canvas: + +#### Code jouable + +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> + <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" /> +</div> +<textarea id="code" class="playable-code"> +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> +``` + +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); var textarea = document.getElementById("code"); @@ -118,50 +117,33 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.drawImage")}}</p> +{{Compat("api.CanvasRenderingContext2D.drawImage")}} -<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2> +## Notes concernant la compatibilité -<ul> - <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li> - <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li> - <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li> - <li>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.</li> - <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canvas</a>.</li> - <li>Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans <a href="/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">corrompre le canevas</a>.</li> -</ul> +- 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). -<h2 id="Notes">Notes</h2> +## Notes -<ul> - <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li> -</ul> +- 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) -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index 49a19c218c..197d6aad25 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -9,73 +9,74 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/ellipse --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p> +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). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var> -</pre> + void ctx.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd> - <dt><code>rayon</code>X</dt> - <dd>Le rayon du grand axe de l'ellipse.</dd> - <dt><code>rayon</code>Y</dt> - <dd>Le rayon du petit axe de l'ellipse.</dd> - <dt><code>rotation</code></dt> - <dd>La rotation pour cette ellipse, exprimée en radians.</dd> - <dt><code>angleDébut</code></dt> - <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd> - <dt><code>angleFin</code></dt> - <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd> - <dt><code>antihoraire</code> {{optional_inline}}</dt> - <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd> -</dl> +- `x` + - : 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. +- `rayon`X + - : Le rayon du grand axe de l'ellipse. +- `rayon`Y + - : Le rayon du petit axe de l'ellipse. +- `rotation` + - : 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. +- `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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> +### Utilisation de la méthode `ellipse` -<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p> +Ceci est seulement un fragment de code simple dessinant une ellipse. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); -</pre> +``` -<p>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) :</p> +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) : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -98,33 +99,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> +{{Compat("api.CanvasRenderingContext2D.ellipse")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- 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 f71a817ce6..d7197dc21c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -7,65 +7,66 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/fill --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.fill()`\*\* de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var> -void <var><em>ctx</em>.fill(path[, fillRule]);</var> -</pre> + void ctx.fill([fillRule]); + void ctx.fill(path[, fillRule]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>fillRule</code></dt> - <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br> - Valeurs possible: - <ul> - <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li> - <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li> - </ul> - </dd> - <dt><code>path</code></dt> - <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd> -</dl> +- `fillRule` -<h2 id="Exemples">Exemples</h2> + - : L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin. + Valeurs possible: -<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3> + - **`"nonzero`**": La [règle de remplissage extérieur/intérieur non nul](http://en.wikipedia.org/wiki/Nonzero-rule), qui est la règle par défaut. + - **`"evenodd"`**: La [règle de remplissage pair/impair](http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule). -<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p> +- `path` + - : Un chemin {{domxref("Path2D")}} à remplir. -<h4 id="HTML">HTML</h4> +## Exemples -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +### Utiliser la méthode `fill` -<h4 id="JavaScript">JavaScript</h4> +Ceci est un simple snippet de code qui utilise la méthode `fill` pour remplir un chemin. -<pre class="brush: js">var canvas = document.getElementById('canvas'); +#### HTML + +```html +<canvas id="canvas"></canvas> +``` + +#### JavaScript + +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.fill();</textarea> -</pre> +ctx.fill();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,19 +89,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3> +### Utiliser l'option `fillRule` -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> </pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -115,18 +119,20 @@ ctx.closePath(); ctx.fillStyle = "lightblue"; ctx.lineWidth = 2; ctx.fill("nonzero"); -ctx.stroke();</pre> +ctx.stroke(); +``` -<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct: -<h4 id="code_jouable_2">Code jouable 2</h4> +#### Code jouable 2 -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(96.50,50.00); ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17); @@ -139,10 +145,11 @@ ctx.closePath(); ctx.fillStyle = "lightblue"; ctx.lineWidth = 2; ctx.fill("nonzero"); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -165,33 +172,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{EmbedLiveSample('code_jouable_2', 700, 360)}}</p> +{{EmbedLiveSample('code_jouable_2', 700, 360)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p> +{{Compat("api.CanvasRenderingContext2D.fill")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index cd98d786b5..d8fc1404f8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -8,65 +8,66 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/fillRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p> +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`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.fillRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>largeur</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : 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. +- `largeur` + - : La largeur du rectangle. +- `hauteur` + - : La hauteur de rectangle. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3> +### Utilisation de la méthode `fillRect` -<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p> +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); // remplir la balise entièrement // ctx.fillRect(0, 0, canvas.width, canvas.height); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +Éditez le code suivant pour voir les changements en direct dans la balise canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.fillStyle = "green"; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> +ctx.fillRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -89,36 +90,23 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> - <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.fillRect")}} + +## Voir aussi + +- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillStyle")}} +- {{domxref("CanvasRenderingContext2D.clearRect()")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index 598ec204af..539ce49e67 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -9,65 +9,66 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/fillStyle --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p> +La propriété **`CanvasRenderingContext2D`\*\***`.fillStyle`\*\* de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est `#000` (black). -<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; -</var><var><em>ctx</em>.fillStyle = gradient; -</var><var><em>ctx</em>.fillStyle = pattern;</var> -</pre> + ctx.fillStyle = color; + ctx.fillStyle = gradient; + ctx.fillStyle = pattern; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>color</code></dt> - <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> - <dt><code>gradient</code></dt> - <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> - <dt><code>pattern</code></dt> - <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> -</dl> +- `color` + - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}. +- `gradient` + - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial). +- `pattern` + - : Un objet {{domxref("CanvasPattern")}} (une image répétée). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> +### Utiliser la propriété `fillStyle` pour définir une couleur différente -<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p> +Ceci est un simple snippet de code utilisant la propriété `fillStyle` pour définir une couleur différente. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; -ctx.fillRect(10, 10, 100, 100);</textarea> -</pre> +ctx.fillRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -90,69 +91,56 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3> +### Un exemple `fillStyle` avec les boucles `for` -<p>Dans cet exemple, nous allons utiliser deux boucles <code>for</code> pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables <code>i</code> et <code>j</code> pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop.</p> +Dans cet exemple, nous allons utiliser deux boucles `for` pour dessiner une grille de rectangles, chacun avec une couleur différente. L'image qui en résulte devrait ressembler à la capture d'écran. Il n'y a rien de très extraordinaire ici, nous utilisons deux variables `i` et `j` pour générer une couleur RGB unique pour chaque carré, en modifiant uniquement les valeurs de rouge et vert; le canal bleu a une valeur fixe. En modifiant les canaux, vous pouvez générer toutes sorte de palettes. En augmentant le nombre, vous pouvez générer quelque chose de ressemblant aux palettes de couleurs utilisées par Photoshop. -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">var ctx = document.getElementById('canvas').getContext('2d'); -for (var i = 0; i < 6; i++){ - for (var j = 0; j < 6; j++){ +```js hidden +var ctx = document.getElementById('canvas').getContext('2d'); +for (var i = 0; i < 6; i++){ + for (var j = 0; j < 6; j++){ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'; ctx.fillRect(j * 25, i * 25, 25, 25); } } -</pre> +``` -<p>Le résultat devrait ressembler à ça:</p> +Le résultat devrait ressembler à ça: -<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}</p> +{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> +{{Compat("api.CanvasRenderingContext2D.fillStyle")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>. +- Outre `ctx.fillStyle`, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, `ctx.setFillColor()`. - <pre class="brush: js">setFillColor(color, optional alpha); -setFillColor(grayLevel, optional alpha); -setFillColor(r, g, b, a); -setFillColor(c, m, y, k, a); -</pre> - </li> -</ul> + ```js + setFillColor(color, optional alpha); + setFillColor(grayLevel, optional alpha); + setFillColor(r, g, b, a); + setFillColor(c, m, y, k, a); + ``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> -</ul> +- L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index fefd1c875a..73d1a75588 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -9,68 +9,69 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/fillText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.fillText()`\*_ de l'API Canvas 2D écrit un texte donné à la position _(x, y)\* donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur. -<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p> +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var> -</pre> + void ctx.fillText(texte, x, y [, largeurMax]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>texte</code></dt> - <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> -</dl> +- `texte` + - : Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}. -<dl> - <dt><code>x</code></dt> - <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd> - <dt><code>y</code></dt> - <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd> - <dt><code>largeurMax</code> {{optional_inline}}</dt> - <dd>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.</dd> -</dl> +<!----> -<h2 id="Exemples">Exemples</h2> +- `x` + - : 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 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. -<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3> +## Exemples -<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p> +### Utilisation de la méthode `fillText` -<h4 id="HTML">HTML</h4> +Ceci est seulement un fragment de code simple utilisant la méthode `fillText`. -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +#### HTML -<h4 id="JavaScript">JavaScript</h4> +```html +<canvas id="canvas"></canvas> +``` -<pre class="brush: js">var canvas = document.getElementById('canvas'); +#### JavaScript + +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.fillText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = "48px serif"; -ctx.fillText("Hello world", 50, 100);</textarea> -</pre> +ctx.fillText("Hello world", 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -93,34 +94,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.fillText")}}</p> +{{Compat("api.CanvasRenderingContext2D.fillText")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.strokeText()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 34b90f9580..37ebc8f81b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -9,57 +9,58 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/font --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.font</code></strong><code> de l'API</code> Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de <a href="/fr-FR/docs/Web/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.font`\*\*` de l'API` Canvas 2D API spécifie le style de texte à utiliser pour dessiner du texte. Cette chaîne utilise la même syntaxe que le spécificateur de [police CSS](/fr-FR/docs/Web/CSS/font). La police par défaut est 10px sans-serif. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var> -</pre> + ctx.font = value; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>valeur</code></dt> - <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd> -</dl> +- `valeur` + - : Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3> +### Utilisation de la propriété `font` -<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p> +Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; -ctx.strokeText('Hello world', 50, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -82,55 +83,40 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3> +### Chargement de polices avec l'API CSS Font Loading -<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p> +A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas. -<pre class="brush: js">var f = new FontFace('test', 'url(x)'); +```js +var f = new FontFace('test', 'url(x)'); f.load().then(function() { // Prêt à utiliser la police dans un contexte de canevas -});</pre> +}); +``` -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p> +{{Compat("api.CanvasRenderingContext2D.font")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li> -</ul> +- Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée `ctx.mozTextStyle` est implémentée en plus de cette propriété. Ne l'utilisez pas. -<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> +### Notes relatives à Quantum -<ul> - <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li> -</ul> +- Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec [Stylo](https://wiki.mozilla.org/Quantum/Stylo) qui a été publié avec Firefox 57. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index 94059efba8..e49af96a35 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -14,88 +14,72 @@ tags: - getImageDate translation_of: Web/API/CanvasRenderingContext2D/getImageData --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.getImageData()</code></strong> 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 <em>(sx, sy)</em> et qui possède des attributs : <em>largeur (sw</em>) et <em>hauteur</em> (<em>sh)</em>. Cette méthode n'est pas affectée par la matrice de transformation du canevas.</p> +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. -<p>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.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> -</pre> + ImageData ctx.getImageData(sx, sy, sw, sh); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>sx</code></dt> - <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd> - <dt><code>sy</code></dt> - <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd> - <dt><code>sw</code></dt> - <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> - <dt><code>sh</code></dt> - <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> -</dl> +- `sx` + - : 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. +- `sw` + - : La largeur du rectangle à partir duquel \*ImageData** \***sera extrait. +- `sh` + - : La hauteur du rectangle à partir duquel \*ImageData** \***sera extrait. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas.</p> +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. -<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3> +### Erreurs renvoyées -<dl> - <dt><code>IndexSizeError</code></dt> - <dd>Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro.</dd> -</dl> +- `IndexSizeError` + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode <code>getImageData</code></h3> +### Utilisation de la méthode `getImageData` -<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez <a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p> +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")}}. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); console.log(ctx.getImageData(50, 50, 100, 100)); // ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] } -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.</li> - <li>{{domxref("ImageData")}}</li> - <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.getImageData")}} + +## Voir aussi + +- L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("ImageData")}} +- [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index 5b404da724..3ffbf48e4e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -9,40 +9,35 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- -<div>{{APIRef}}</div> +{{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). -<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> 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).</div> +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). -<div> </div> +## Syntaxe -<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> + ctx.globalAlpha = valeur; -<h2 id="Syntaxe">Syntaxe</h2> +### Options -<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var> -</pre> +- `valeur` + - : Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et `globalAlpha` conservera sa valeur précédente. -<h3 id="Options">Options</h3> +## Exemples -<dl> - <dt><code>valeur</code></dt> - <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd> -</dl> +### Utilisation de la propriété `globalAlpha` -<h2 id="Exemples">Exemples</h2> +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. -<h3 id="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> +#### HTML -<p>Il s'agit seulement d'un simple fragment de code utilisant la propriété <code>globalAlpha</code> pour dessiner deux rectangles semi-transparents.</p> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="HTML">HTML</h4> +#### JavaScript -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.globalAlpha = 0.5; @@ -52,28 +47,30 @@ ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = "red"; ctx.fillRect(50, 50, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code" style="height:120px;"> +```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" /> +</div> +<textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = 'red'; -ctx.fillRect(50, 50, 100, 100);</textarea> -</pre> +ctx.fillRect(50, 50, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); +```js hidden +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacement = document.getElementById('effacement'); @@ -96,15 +93,16 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 380) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 380) }} -<h3 id="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> +### Un exemple de `globalAlpha` -<p>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 <code>for</code> 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.</p> +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. -<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); +```js +var ctx = document.getElementById('canevas').getContext('2d'); // Dessiner l'arrière-plan ctx.fillStyle = '#FD0'; @@ -121,53 +119,38 @@ ctx.fillStyle = '#FFF'; ctx.globalAlpha = 0.2; // Dessiner les cercles semi-transparents -for (i = 0; i < 7; i++){ +for (i = 0; i < 7; i++){ ctx.beginPath(); ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); ctx.fill(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canevas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> +{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p> +{{Compat("api.CanvasRenderingContext2D.globalAlpha")}} -<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> +## Notes spécifiques à Gecko -<ul> - <li>À 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.</li> -</ul> +- À 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. -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li> -</ul> +- Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée `ctx.setAlpha() `est implémentée en plus de cette propriété. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 7291e23e2b..c82c88770b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -3,36 +3,38 @@ title: CanvasRenderingContext2D.globalCompositeOperation slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p> +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. -<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre> + ctx.globalCompositeOperation = type; -<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p> +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. -<h3 id="Types">Types</h3> +### Types -<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> +{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}} -<h2 id="Examples">Examples</h2> +## Examples -<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3> +### Changer l'opération de composition -<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p> +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'xor'; @@ -42,54 +44,33 @@ ctx.fillRect(10, 10, 100, 100); ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p> +{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Etat</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('Compositing')}}</td> - <td>{{Spec2('Compositing')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Etat | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('Compositing')}} | {{Spec2('Compositing')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p> +{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}} -<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3> +### Remarques concernant WebKit/Blink -<ul> - <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li> - <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li> -</ul> +- 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. -<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3> +### Remarques concernant Gecko -<ul> - <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li> -</ul> +- 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"`. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> -</ul> +- L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.globalAlpha")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index d9064377d8..27fa24574b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -11,37 +11,37 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- -<div>{{APIRef}} {{SeeCompatTable}}</div> +{{APIRef}} {{SeeCompatTable}} -<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p> +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. -<p>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é à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p> +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")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre> + ctx.imageSmoothingEnabled = valeur; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>valeur</code></dt> - <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd> -</dl> +- `valeur` + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. -<h2 id="exemples">exemples</h2> +## exemples -<h3 id="désactiver_le_lissage_d_image">Désactiver le lissage d'image</h3> +### Désactiver le lissage d'image -<p>Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.</p> +Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas> -</pre> +```html +<canvas id="canvas" width="460" height="210"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js;">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.font = '16px sans-serif'; @@ -64,36 +64,23 @@ img.onload = function() { ctx.imageSmoothingEnabled = false; ctx.drawImage(img, w * 4, 24, w * 3, h * 3); }; -</pre> +``` -<h4 id="résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}</p> +{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p> +{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{cssxref("image-rendering")}}</li> -</ul> +- 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 73758824a3..68b20a683f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -8,373 +8,311 @@ tags: - graphique translation_of: Web/API/CanvasRenderingContext2D --- -<p>{{APIRef}}</p> - -<p>L'interface <strong>CanvasRenderingContext2D</strong> 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")}}.</p> - -<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code><canvas></code>, en fournissant "2d" comme argument :</p> - -<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> -var ctx = canevas.getContext('2d'); -</pre> - -<p>Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</p> - -<pre>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 -</pre> - -<p>Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">tutoriel canvas</a> a davantage d'informations, d'exemples et de ressources également.</p> - -<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2> - -<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> - <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd> - <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> - <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> - <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd> -</dl> - -<h2 id="Dessiner_du_texte">Dessiner du texte</h2> - -<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> - <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> - <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd> - <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> - <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd> -</dl> - -<h2 id="Styles_de_ligne">Styles de ligne</h2> - -<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> - <dd>Largeur des lignes. Défaut <code>1.0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> - <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> - <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd> - <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> - <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> - <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> - <dd>Définit le modèle du trait courant.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> - <dd>Specifies where to start a dash array on a line.</dd> -</dl> - -<h2 id="Styles_de_texte">Styles de texte</h2> - -<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> - <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> - <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> - <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> - <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd> -</dl> - -<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> - -<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> - <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> - <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> -</dl> - -<h2 id="Gradients_and_patterns">Gradients and patterns</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> - <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> - <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> - <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> -</dl> - -<h2 id="Shadows">Shadows</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> - <dd>Specifies the blurring effect. Default <code>0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> - <dd>Color of the shadow. Default fully-transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> - <dd>Horizontal distance the shadow will be offset. Default 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> - <dd>Vertical distance the shadow will be offset. Default 0.</dd> -</dl> - -<h2 id="Paths">Paths</h2> - -<p>The following methods can be used to manipulate paths of objects.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> - <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> - <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> - <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> - <dd>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 <code>moveTo()</code>before creating the Bézier curve.</dd> - <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> - <dd>Adds a quadratic Bézier curve to the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> - <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> - <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> - <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> - <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> -</dl> - -<h2 id="Drawing_paths">Drawing paths</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> - <dd>Fills the subpaths with the current fill style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> - <dd>Strokes the subpaths with the current stroke style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> - <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> - <dd>Scrolls the current path or a given path into the view.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> - <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing">Clipping paths</a> in the Canvas tutorial.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> - <dd>Reports whether or not the specified point is contained in the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> - <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> -</dl> - -<h2 id="Transformations">Transformations</h2> - -<p>Objects in the <code>CanvasRenderingContext2D</code> 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.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> - <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> - <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> - <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> - <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> - <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> - <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> - <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> - <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> - <dd>Resets the current transform by the identity matrix.</dd> -</dl> - -<h2 id="Compositing">Compositing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> - <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd> - <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> - <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> -</dl> - -<h2 id="Drawing_images">Drawing images</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> - <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> -</dl> - -<h2 id="Pixel_manipulation">Pixel manipulation</h2> - -<p>See also the {{domxref("ImageData")}} object.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> - <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> - <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> - <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> - <dd>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.</dd> -</dl> - -<h2 id="Image_smoothing">Image smoothing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> - <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> -</dl> - -<h2 id="The_canvas_state">The canvas state</h2> - -<p>The <code>CanvasRenderingContext2D</code> 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:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> - <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> - <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> - <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> -</dl> - -<h2 id="Hit_regions">Hit regions</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Adds a hit region to the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Removes all hit regions from the canvas.</dd> -</dl> - -<h2 id="Non-standard_APIs">Non-standard APIs</h2> - -<h3 id="Blink_and_WebKit">Blink and WebKit</h3> - -<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> - <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> - <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> -</dl> - -<h3 id="Blink_only">Blink only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> - <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> -</dl> - -<h3 id="WebKit_only">WebKit only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> - <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> -</dl> - -<dl> -</dl> - -<h3 id="Gecko_only">Gecko only</h3> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> - <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> -</dl> - -<h4 id="Prefixed_APIs">Prefixed APIs</h4> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> - <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> - <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> - <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> - <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> - <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> - <dd>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.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> -</dl> - -<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> - <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> - <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> -</dl> - -<h3 id="Internet_Explorer">Internet Explorer</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> - <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.CanvasRenderingContext2D")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> -</ul> +{{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")}}. + +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 : + + 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. + +## Dessin de rectangles + +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é. +- {{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. + +## 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. +- {{domxref("CanvasRenderingContext2D.strokeText()")}} + - : Dessine (contour) un texte donné à la position (x, y) donnée. +- {{domxref("CanvasRenderingContext2D.measureText()")}} + - : Renvoie un objet {{domxref("TextMetrics")}}. + +## Styles de ligne + +Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées. + +- {{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`. +- {{domxref("CanvasRenderingContext2D.lineJoin")}} + - : 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()")}} + - : Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs. +- {{domxref("CanvasRenderingContext2D.setLineDash()")}} + - : Définit le modèle du trait courant. +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} + - : Specifies where to start a dash array on a line. + +## Styles de texte + +Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage. + +- {{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`. +- {{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`. +- {{domxref("CanvasRenderingContext2D.direction")}} + - : 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). +- {{domxref("CanvasRenderingContext2D.strokeStyle")}} + - : Color or style to use for the lines around shapes. Default `#000` (black). + +## Gradients and patterns + +- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} + - : Creates a linear gradient along the line given by the coordinates represented by the parameters. +- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} + - : Creates a radial gradient given by the coordinates of the two circles represented by the parameters. +- {{domxref("CanvasRenderingContext2D.createPattern()")}} + - : Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}. + +## Shadows + +- {{domxref("CanvasRenderingContext2D.shadowBlur")}} + - : Specifies the blurring effect. Default `0` +- {{domxref("CanvasRenderingContext2D.shadowColor")}} + - : Color of the shadow. Default fully-transparent black. +- {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} + - : Horizontal distance the shadow will be offset. Default 0. +- {{domxref("CanvasRenderingContext2D.shadowOffsetY")}} + - : Vertical distance the shadow will be offset. Default 0. + +## Paths + +The following methods can be used to manipulate paths of objects. + +- {{domxref("CanvasRenderingContext2D.beginPath()")}} + - : Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path. +- {{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. +- {{domxref("CanvasRenderingContext2D.lineTo()")}} + - : 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. +- {{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). +- {{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). +- {{domxref("CanvasRenderingContext2D.rect()")}} + - : Creates a path for a rectangle at\* *position *(x, y)* with a size that is determined by *width* and *height\*. + +## Drawing paths + +- {{domxref("CanvasRenderingContext2D.fill()")}} + - : Fills the subpaths with the current fill style. +- {{domxref("CanvasRenderingContext2D.stroke()")}} + - : Strokes the subpaths with the current stroke style. +- {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} + - : If a given element is focused, this method draws a focus ring around the current path. +- {{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. +- {{domxref("CanvasRenderingContext2D.isPointInPath()")}} + - : Reports whether or not the specified point is contained in the current path. +- {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} + - : Reports whether or not the specified point is inside the area contained by the stroking of a path. + +## 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. + +- {{domxref("CanvasRenderingContext2D.currentTransform")}} + - : Current transformation matrix ({{domxref("SVGMatrix")}} object). +- {{domxref("CanvasRenderingContext2D.rotate()")}} + - : Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians. +- {{domxref("CanvasRenderingContext2D.scale()")}} + - : Adds a scaling transformation to the canvas units by x horizontally and by y vertically. +- {{domxref("CanvasRenderingContext2D.translate()")}} + - : Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid. +- {{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. +- {{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). +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + +## Drawing images + +- {{domxref("CanvasRenderingContext2D.drawImage()")}} + - : Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use. + +## Pixel manipulation + +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. +- {{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. + +## Image smoothing + +- {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}} + - : Image smoothing mode; if disabled, images will not be smoothed if scaled. + +## 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: + +- {{domxref("CanvasRenderingContext2D.save()")}} + - : 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()`. +- {{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. + +## Hit regions + +- {{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. +- {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} + - : Removes all hit regions from the canvas. + +## Non-standard APIs + +### 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). + +- {{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()` + - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` + - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` + - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` + - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` + - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` + - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` + - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` + - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` + - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` + - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` + - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. +- {{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. + +### 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` + - : Intended for HD backing stores, but removed from canvas specifications. +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` + - : Intended for HD backing stores, but removed from canvas specifications. + +<!----> + +### Gecko only + +- {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}} + - : CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification. + +#### 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` + - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. +- {{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()` + - : 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()` + - : 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()` + - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. +- {{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()` + - : 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). + +## Specifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | + +## Browser compatibility + +{{Compat("api.CanvasRenderingContext2D")}} + +## See also + +- {{domxref("HTMLCanvasElement")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index ee87a2aafe..033a50cd4c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -9,43 +9,43 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/lineCap --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> 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 : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p> +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`. -<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> +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). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt"; -<var><em>ctx</em>.lineCap = "round"; -<var><em>ctx</em>.lineCap = "square";</var></var></var></pre> + ctx.lineCap = "butt"; + ctx.lineCap = "round"; + ctx.lineCap = "square"; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>butt</code></dt> - <dd>Les extrémités de ligne sont coupées à angle droit.</dd> - <dt><code>round</code></dt> - <dd>Les extrémités de ligne sont arrondies.</dd> - <dt><code>square</code></dt> - <dd>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é.</dd> -</dl> +- `butt` + - : Les extrémités de ligne sont coupées à angle droit. +- `round` + - : 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é. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> +### Utilisation de la propriété `lineCap` -<p>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.</p> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); @@ -54,27 +54,29 @@ ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.lineTo(100, 100); ctx.stroke(); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineWidth = 15; ctx.lineCap = 'round'; ctx.lineTo(100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); +```js hidden +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacer = document.getElementById('effacer'); @@ -97,17 +99,18 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +### Un exemple de `lineCap` -<p>Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété <code>lineCap</code>. 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.</p> +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. -<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. 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 <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p> +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é. -<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); +```js +var ctx = document.getElementById('canevas').getContext('2d'); var lineCap = ['butt','round','square']; // Dessiner les guides @@ -121,7 +124,7 @@ ctx.stroke(); // Dessiner les lignes ctx.strokeStyle = 'black'; -for (var i = 0; i < lineCap.length; i++) { +for (var i = 0; i < lineCap.length; i++) { ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); @@ -129,43 +132,30 @@ for (var i = 0; i < lineCap.length; i++) { ctx.lineTo(25 + i * 50, 140); ctx.stroke(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canevas" width="150" height="150"></canvas> +``` -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> +{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p> +{{Compat("api.CanvasRenderingContext2D.lineCap")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li> -</ul> +- 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é. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- {{domxref("CanvasRenderingContext2D.lineJoin")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index 93b38bb13d..c438190f71 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -10,50 +10,47 @@ tags: - stroke translation_of: Web/API/CanvasRenderingContext2D/lineJoin --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p> +La propriété **`CanvasRenderingContext2D`\*\***`.lineJoin`\*\* de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection. -<p>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.</p> +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. -<div class="blockIndicator note"> -<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p> -</div> +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter"; -</pre> + ctx.lineJoin = "bevel" || "round" || "miter"; -<h3 id="Options">Options</h3> +### Options -<p>Il y a trois valeurs possibles pour cette propriété: <code>"round"</code>, <code>"bevel"</code> et <code>"miter"</code>. Celle par défaut est <code>"miter"</code>.</p> +Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et `"miter"`. Celle par défaut est `"miter"`. -<p><img alt="" src="canvas_linejoin.png"></p> + -<dl> - <dt><code>"round"</code> (rond)</dt> - <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd> - <dt><code>"bevel"</code> (biseau)</dt> - <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd> - <dt><code>"miter"</code> (onglet)</dt> - <dd>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.</dd> -</dl> +- `"round"` (rond) + - : Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne . +- `"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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3> +### Modifier les jointures d'un tracé -<p>Cet exemple applique des jointures arrondies au tracé.</p> +Cet exemple applique des jointures arrondies au tracé. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 20; @@ -64,23 +61,26 @@ ctx.lineTo(190, 100); ctx.lineTo(280, 20); ctx.lineTo(280, 150); ctx.stroke(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p> +{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }} -<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3> +### Comparaison des jointures de lignes -<p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p> +L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de `lineJoin`. -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +```js +var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; ctx.lineWidth = 10; -for (let i = 0; i < lineJoin.length; i++) { +for (let i = 0; i < lineJoin.length; i++) { ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(-5, 5 + i * 40); @@ -90,44 +90,27 @@ for (let i = 0; i < lineJoin.length; i++) { ctx.lineTo(155, 5 + i * 40); ctx.stroke(); } -</pre> +``` -<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}</p> +{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2> +## Compatibilité des naviagateurs +{{Compat("api.CanvasRenderingContext2D.lineJoin")}} +### WebKit/Blink-notes particulières -<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p> +- Dans les navigateurs basés sur WebKit et Blink, une méthode `ctx.setLineJoin()` non-standard et obsolète est implémentée en plus de cette propriété. -<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3> +## Voir aussi -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li> -</ul> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> - <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li> -</ul> +- L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineCap")}} +- {{domxref("CanvasRenderingContext2D.lineWidth")}} +- [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 6ed54f222e..776fe0223d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -9,63 +9,64 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/lineTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p> +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). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var> -</pre> + void ctx.lineTo(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'abscisse <em>x</em> du point d'arrivée.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd> -</dl> +- `x` + - : L'abscisse _x_ du point d'arrivée. +- `y` + - : L'ordonnée _y_ du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3> +### Utilisation de la méthode `lineTo` -<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. 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.</p> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100, 100); ctx.stroke(); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct:</p> +Éditez le code suivant pour voir les changements en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,35 +89,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.lineTo")}} + +## Voir aussi + +- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.moveTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index ef2a1af3a9..48521a7e8d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -9,65 +9,52 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/measureText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.measureText()</code></strong> renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple).</p> +La méthode **`CanvasRenderingContext2D`\*\***`.measureText()`\*\* renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). -<h2 id="Syntax">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre> + ctx.measureText(texte); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>texte</dt> - <dd>Le texte à mesurer.</dd> -</dl> +- texte + - : Le texte à mesurer. -<h3 id="Valeur_retournée">Valeur retournée</h3> +### Valeur retournée -<p>Un objet {{domxref("TextMetrics")}}.</p> +Un objet {{domxref("TextMetrics")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p> +Étant donné cet élément {{HTMLElement("canvas")}} : -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p> +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var texte = ctx.measureText('foo'); // objet TextMetrics texte.width; // 16; -</pre> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.measureText")}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> - <li>{{domxref("TextMetrics")}}</li> -</ul> +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.measureText")}} + +## Voir aussi + +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. +- {{domxref("TextMetrics")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index 958b41c5aa..e2bd2fb269 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -7,63 +7,64 @@ tags: - CanvasRenderingContext2D translation_of: Web/API/CanvasRenderingContext2D/moveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.moveTo()`\*\* de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées `(x, y)`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> -</pre> + void ctx.moveTo(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'axe des x du point.</dd> - <dt><code>y</code></dt> - <dd>L'axe des y du point.</dd> -</dl> +- `x` + - : L'axe des x du point. +- `y` + - : L'axe des y du point. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3> +### Utiliser la méthode `moveTo` -<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p> +Ceci est un simple snippet de code qui utilise la méthode `moveTo` pour déplacer le stylo à une position de départ pour dessiner une ligne. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(200, 50); ctx.stroke(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.beginPath(); ctx.moveTo(50,50); ctx.lineTo(200, 50); -ctx.stroke()</textarea> -</pre> +ctx.stroke()</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -86,35 +87,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.moveTo")}} + +## Voir aussi + +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.lineTo()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index 7587faa897..7b95e52523 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -16,42 +16,41 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.quadraticCurveTo()`\*\* de l'API Canvas 2D ajoute une [courbe de Bézier](https://en.wikipedia.org/wiki/B%C3%A9zier_curve) quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>); -</pre> + void contexte2D.quadraticCurveTo(pointContrôleX, pointContrôleY, pointArrivéeX, pointArrivéeY); -<h3 id="Paramètress">Paramètress</h3> +### Paramètress -<dl> - <dt><code>pointContrôleX</code></dt> - <dd>La coordonnée en x du point de contrôle.</dd> - <dt><code>pointContrôleY</code></dt> - <dd>La coordonnée en y du point de contrôle.</dd> - <dt><code>pointArrivéeX</code></dt> - <dd>La coordonnée en x du point d'arrivée.</dd> - <dt><code>pointArrivéeY</code></dt> - <dd>La coordonnée en y du point d'arrivée.</dd> -</dl> +- `pointContrôleX` + - : La coordonnée en x du point de contrôle. +- `pointContrôleY` + - : La coordonnée en y du point de contrôle. +- `pointArrivéeX` + - : La coordonnée en x du point d'arrivée. +- `pointArrivéeY` + - : La coordonnée en y du point d'arrivée. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3> +### Comment quadraticCurveTo fonctionne -<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p> +Cet exemple montre comment un courbe quadratique de Bézier est dessinée. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canevas = document.getElementById("canvas"); +```js +const canevas = document.getElementById("canvas"); const contexte2D= canevas.getContext("2d"); // courbe quadratique de Bézier @@ -72,66 +71,53 @@ contexte2D.fillStyle = 'red'; contexte2D.beginPath(); contexte2D.arc(230, 30, 5, 0, 2 * Math.PI); contexte2D.fill(); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu.</p> +Dans cet exemple, le point de contrôle est rouge et les points de départ et d'arrivée sont en bleu. -<p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p> +{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}} -<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3> +### Une courbe quadratique simple -<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p> +Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode `quadraticCurveTo()`. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript_2">JavaScript</h4> +#### JavaScript -<p>La courbe commence au point spécifié par <code>moveTo()</code>: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20).</p> +La courbe commence au point spécifié par `moveTo()`: (20, 110). Le point de contrôle est placé à (230, 150). La courbe s'achève en (250, 20). -<pre class="brush: js">const canevas = document.getElementById("canvas"); +```js +const canevas = document.getElementById("canvas"); const contexte2D = canevas.getContext("2d"); contexte2D.beginPath(); contexte2D.moveTo(20, 110); contexte2D.quadraticCurveTo(230, 150, 250, 20); contexte2D.stroke(); -</pre> +``` -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p> +{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}} +## Voir aussi -<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li> - <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li> -</ul> +- L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}} +- [L'article Wikipédia sur les courbes quadratiques de Bézier](http://fr.wikipedia.org/wiki/Courbe_de_Bézier) diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 8a822dd115..982b8594f8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -8,62 +8,63 @@ tags: - Méthode translation_of: Web/API/CanvasRenderingContext2D/rect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.rect()`\*_ de l'API Canvas 2D crée un chemin de rectangle à la position _(x, y)* et de dimensions *width* et *height\*. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser `fill` ou `stroke` pour dessiner ce rectangle. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> -</pre> + void ctx.rect(x, y, width, height); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée x pour le côté gauche du rectangle.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée y pour le haut du rectangle.</dd> - <dt><code>width</code></dt> - <dd>La largeur du rectangle.</dd> - <dt><code>height</code></dt> - <dd>La hauteur du rectangle.</dd> -</dl> +- `x` + - : La coordonnée x pour le côté gauche du rectangle. +- `y` + - : La coordonnée y pour le haut du rectangle. +- `width` + - : La largeur du rectangle. +- `height` + - : La hauteur du rectangle. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3> +### Utiliser la méthode `rect` -<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p> +Ceci est un simple bout de code qui utilise la méthode `rect` pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p> +Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.fill();</textarea> -</pre> +ctx.fill();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -86,37 +87,24 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Specification | Status | Comment | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.rect")}} + +## Voir aussi + +- L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillRect")}} +- {{domxref("CanvasRenderingContext2D.strokeRect()")}} +- {{domxref("CanvasRenderingContext2D.fill()")}} +- {{domxref("CanvasRenderingContext2D.stroke()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index 5cde5f8af5..3aec5226fa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -9,40 +9,39 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/rotate --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.rotate()`\*\*` de l'API` Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> -</pre> + void ctx.rotate(angle); -<p><img alt="" src="canvas_grid_rotate.png"></p> + -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>angle</code></dt> - <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd> -</dl> +- `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. -<p>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()")}}.</p> +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()")}}. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3> +### Utilisation de la méthode `rotate` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rotate(45 * Math.PI / 180); @@ -50,24 +49,26 @@ ctx.fillRect(70, 0, 100, 30); // réinitialise la matrice de transformation courante à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); ctx.fillRect(70,0,100,30); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,33 +91,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.rotate")}}</p> +{{Compat("api.CanvasRenderingContext2D.rotate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.md b/files/fr/web/api/canvasrenderingcontext2d/save/index.md index d91e31ffbe..cc49bad21e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.md @@ -9,39 +9,39 @@ tags: - Save translation_of: Web/API/CanvasRenderingContext2D/save --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.save()`\*\* de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack. -<h3 id="Létat_du_dessin">L'état du dessin</h3> +### L'état du dessin -<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p> +L'état du dessin qui est sauvegardé dans une stack se compose de: -<ul> - <li>La matrice de transformation actuelle.</li> - <li>La région de détourage actuelle.</li> - <li>Le tableau pour les tracés en pointillés.</li> - <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> -</ul> +- La matrice de transformation actuelle. +- La région de détourage actuelle. +- Le tableau pour les tracés en pointillés. +- Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <em>ctx</em>.save();</pre> + void ctx.save(); -<h2 id="Exemple">Exemple</h2> +## Exemple -<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3> +### Enregistrer l'état du dessin -<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code> pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p> +Cet exemple utilise la méthode `save()` pour enregistrer l'état par défaut et `restore()` pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">const canvas = document.getElementById('canvas'); +```js +const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // On sauvegarde l'état par défaut @@ -54,38 +54,23 @@ ctx.fillRect(10, 10, 100, 100); ctx.restore(); ctx.fillRect(150, 40, 100, 100); -</pre> +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p> +{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs +{{Compat("api.CanvasRenderingContext2D.save")}} +## Voir aussi -<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> -</ul> +- L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.restore()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index cb24a37aa0..f8ca5735cb 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -9,40 +9,39 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/scale --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p> +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. -<p>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.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var> -</pre> + void ctx.scale(x, y); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>Facteur d'échelle dans la direction horizontale.</dd> - <dt>y</dt> - <dd>Facteur d'échelle dans la direction verticale.</dd> -</dl> +- `x` + - : Facteur d'échelle dans la direction horizontale. +- y + - : Facteur d'échelle dans la direction verticale. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3> +### Utilisation de la méthode `scale` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.scale(10, 3); @@ -50,24 +49,26 @@ ctx.fillRect(10, 10, 10, 10); // remet la matrice de transformation courante à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.scale(10, 3); ctx.fillRect(10,10,10,10); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,29 +91,31 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3> +### Utilisation de `scale` pour un retournement horizontal ou vertical -<p>Vous pouvez utiliser <code>ctx.scale(-1, 1)</code> pour retourner le contexte horizontalement et <code>ctx.scale(1, -1) </code>pour le retourner verticalement.</p> +Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1) `pour le retourner verticalement. -<h4 id="code_jouable_2">Code jouable 2</h4> +#### Code jouable 2 -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.scale(-1, 1); ctx.font = "48px serif"; ctx.fillText("Hello world!", -320, 120); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -135,33 +138,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable_2', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable_2', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> +## Compatibilité navigateur -<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p> +{{Compat("api.CanvasRenderingContext2D.scale")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index e8cdb0416e..520e2c8bb5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -14,42 +14,39 @@ tags: - setLineDash translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong><code>setLineDash()</code></strong> 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.</p> +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. -<div class="note"> -<p><strong>Note :</strong> Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> -</div> +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var> -</pre> + ctx.setLineDash(segments); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>segments</code></dt> - <dd>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, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd> -</dl> +- `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. -<h3 id="Valeur_de_retour">Valeur de retour</h3> +### Valeur de retour -<p><code>undefined</code>.</p> +`undefined`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p> +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. -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -63,20 +60,21 @@ ctx.setLineDash([]); ctx.moveTo(0, 150); ctx.lineTo(400, 150); ctx.stroke(); -</pre> +``` -<h3 id="Essayez_le">Essayez le</h3> +### Essayez le -<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p> +Editez le code ci-dessous et observez les changements se produire dans le canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code" style="height:150px"> +```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" /> +</div> +<textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); ctx.setLineDash([5, 15]); ctx.moveTo(0, 50); @@ -87,10 +85,11 @@ ctx.beginPath(); ctx.setLineDash([]); ctx.moveTo(0, 150); ctx.lineTo(400, 150); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -113,47 +112,30 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 10, 410) }}</p> +{{ EmbedLiveSample('code_jouable', 10, 410) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2> +## Compatibilité des navivgateurs -<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p> +{{Compat("api.CanvasRenderingContext2D.setLineDash")}} -<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2> +## Notes spécifiques pour Gecko -<ul> - <li>Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> 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 <code>setLineDash()</code> à la place.</li> -</ul> +- 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. -<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2> +## Notes spécifiques pour WebKit -<ul> - <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li> -</ul> +- 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. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> -</ul> +- L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.getLineDash()")}} +- {{domxref("CanvasRenderingContext2D.lineDashOffset")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index e66241605d..a1dcc5a0f9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/setTransform --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> 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.</p> +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. -<p>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..</p> +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.. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var> -</pre> + void ctx.setTransform(a, b, c, d, e, f); -<p>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></p> +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> -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>a (m11)</code></dt> - <dd>Échelle horizontale.</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>Inclinaison horizontale.</dd> - <dt><code>c (m21)</code></dt> - <dd>Inclinaison verticale.</dd> - <dt><code>d (m22)</code></dt> - <dd>Échelle verticale.</dd> - <dt><code>e (dx)</code></dt> - <dd>Déplacement horizontal.</dd> - <dt><code>f (dy)</code></dt> - <dd>Déplacement vertical.</dd> -</dl> +- `a (m11)` + - : Échelle horizontale. +- _`b (m12)`_ + - : Inclinaison horizontale. +- `c (m21)` + - : Inclinaison verticale. +- `d (m22)` + - : Échelle verticale. +- `e (dx)` + - : Déplacement horizontal. +- `f (dy)` + - : Déplacement vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3> +### Utilisation de la méthode `setTransform` -<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p> +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); -ctx.fillRect(0,0,100,100);</textarea> -</pre> +ctx.fillRect(0,0,100,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -96,34 +97,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> +## Compatibilité navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p> +{{Compat("api.CanvasRenderingContext2D.setTransform")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.transform()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index fd836674ad..8d06004dc7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -3,57 +3,58 @@ title: CanvasRenderingContext2D.stroke() slug: Web/API/CanvasRenderingContext2D/stroke translation_of: Web/API/CanvasRenderingContext2D/stroke --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p> +La méthode **`CanvasRenderingContext2D`\*\***`.stroke()`\*\* de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> -void <var><em>ctx</em>.stroke(path);</var> -</pre> + void ctx.stroke(); + void ctx.stroke(path); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>path</code></dt> - <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd> -</dl> +- `path` + - : Un chemin {{domxref("Path2D")}} à dessiner. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3> +### Utilisation de la méthode `stroke` -<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p> +Il s'agit d'un extrait de code simple utilisant la méthode `stroke` pour tracer un chemin. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); -</pre> +``` -<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p> +Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); -ctx.stroke();</textarea> -</pre> +ctx.stroke();</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -76,33 +77,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> +## Compatibilité avec les navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p> +{{Compat("api.CanvasRenderingContext2D.stroke")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index 14620b3c66..0c696da8c0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -9,63 +9,64 @@ tags: - Référence(2) translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p> +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`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var> -</pre> + void ctx.strokeRect(x, y, largeur, hauteur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd> - <dt><code>y</code></dt> - <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd> - <dt>largeur</dt> - <dd>La largeur du rectangle.</dd> - <dt><code>hauteur</code></dt> - <dd>La hauteur de rectangle.</dd> -</dl> +- `x` + - : 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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3> +### Utilisation de la méthode `strokeRect` -<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p> +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById("canvas"); +```js +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "green"; ctx.strokeRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> +Éditez le code suivant pour voir les changements en direct dans la balise canvas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; -ctx.strokeRect(10, 10, 100, 100);</textarea> -</pre> +ctx.strokeRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,36 +89,23 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> - <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasRenderingContext2D.strokeRect")}} + +## Voir aussi + +- l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.strokeStyle")}} +- {{domxref("CanvasRenderingContext2D.clearRect()")}} +- {{domxref("CanvasRenderingContext2D.fillRect()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index fa703e43d0..1bde6b2ed5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -3,65 +3,66 @@ title: CanvasRenderingContext2D.strokeStyle slug: Web/API/CanvasRenderingContext2D/strokeStyle translation_of: Web/API/CanvasRenderingContext2D/strokeStyle --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p> +La propriété **`CanvasRenderingContext2D.strokeStyle`** de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est `#000` (black). -<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> +Voir également le chapitre [Ajout de styles et de couleurs](/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color; -</var><var><em>ctx</em>.strokeStyle = gradient; -</var><var><em>ctx</em>.strokeStyle = pattern;</var> -</pre> + ctx.strokeStyle = color; + ctx.strokeStyle = gradient; + ctx.strokeStyle = pattern; -<h3 id="Options">Options</h3> +### Options -<dl> - <dt><code>color</code></dt> - <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> - <dt><code>gradient</code></dt> - <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> - <dt><code>pattern</code></dt> - <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> -</dl> +- `color` + - : Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}. +- `gradient` + - : Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial). +- `pattern` + - : Un objet {{domxref("CanvasPattern")}} (une image répétée). -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> +### Utiliser la propriété `strokeStyle` pour définir une couleur différente -<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p> +Ceci est un simple snippet de code utilisant la propriété `strokeStyle` pour définir une couleur différente. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = 'blue'; ctx.strokeRect(10, 10, 100, 100); -</pre> +``` -<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> +Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; -ctx.strokeRect(10, 10, 100, 100);</textarea> -</pre> +ctx.strokeRect(10, 10, 100, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -84,18 +85,19 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +### Un exemple `strokeStyle` -<p>Cet exemple utilise la propriété <code>strokeStyle</code> pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés.</p> +Cet exemple utilise la propriété `strokeStyle` pour changer les couleurs des contours des formes. Nous utilisons la méthode {{domxref("CanvasRenderingContext2D.arc", "arc()")}} pour dessiner des cercles au lieu de carrés. -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +```js +var ctx = document.getElementById('canvas').getContext('2d'); -for (var i = 0; i < 6; i++) { - for (var j = 0; j < 6; j++) { +for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ')'; ctx.beginPath(); @@ -103,52 +105,39 @@ for (var i = 0; i < 6; i++) { ctx.stroke(); } } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<p>Le résultat devrait ressembler à ça:</p> +Le résultat devrait ressembler à ça: -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> +{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Specification | Status | Comment | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Browser_compatibility">Browser compatibility</h2> +## Browser compatibility -<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p> +{{Compat("api.CanvasRenderingContext2D.strokeStyle")}} -<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> +## Notes spécifiques à WebKit/Blink -<ul> - <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, 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épréciée, `ctx.setStrokeColor()`, est implémentée en plus de cette propriété. - <pre class="brush: js">setStrokeColor(color, optional alpha); -setStrokeColor(grayLevel, optional alpha); -setStrokeColor(r, g, b, a); -setStrokeColor(c, m, y, k, a); -</pre> - </li> -</ul> + ```js + setStrokeColor(color, optional alpha); + setStrokeColor(grayLevel, optional alpha); + setStrokeColor(r, g, b, a); + setStrokeColor(c, m, y, k, a); + ``` -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasPattern")}}</li> -</ul> +- L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasGradient")}} +- {{domxref("CanvasPattern")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index c1b20a2580..3778eedf4f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -9,68 +9,69 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/strokeText --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. 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.</p> +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. -<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p> +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var> -</pre> + void ctx.strokeText(texte, x, y [, largeurMax]); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>texte</code></dt> - <dd>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")}}.</dd> -</dl> +- `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")}}. -<dl> - <dt><code>x</code></dt> - <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd> - <dt><code>y</code></dt> - <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd> - <dt><code>largeurMax</code> {{optional_inline}}</dt> - <dd>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.</dd> -</dl> +<!----> -<h2 id="Exemples">Exemples</h2> +- `x` + - : 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. -<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3> +## Exemples -<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p> +### Utilisation de la méthode `strokeText` -<h4 id="HTML">HTML</h4> +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +#### HTML -<h4 id="JavaScript">JavaScript</h4> +```html +<canvas id="canevas"></canvas> +``` -<pre class="brush: js">var canevas = document.getElementById('canevas'); +#### JavaScript + +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas: -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = "48px serif"; -ctx.strokeText("Hello world", 50, 100);</textarea> -</pre> +ctx.strokeText("Hello world", 50, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -93,34 +94,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p> +{{Compat("api.CanvasRenderingContext2D.strokeText")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.fillText()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index ba3b152f70..a6da0bb4f9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/textAlign --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> 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.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> -</pre> + ctx.textAlign = "left" || "right" || "center" || "start" || "end"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>left</dt> - <dd>Le texte est aligné à gauche.</dd> - <dt>right</dt> - <dd>Le texte est aligné à droite.</dd> - <dt>center</dt> - <dd>Le texte est centré.</dd> - <dt>start</dt> - <dd>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).</dd> - <dt>end</dt> - <dd>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).</dd> -</dl> +- left + - : Le texte est aligné à gauche. +- right + - : Le texte est aligné à droite. +- 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). +- 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). -<p>La valeur pa défaut est <code>start</code>.</p> +La valeur pa défaut est `start`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> +### Utilisation de la propriété `textAlign` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p> +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Playable code</h4> +#### Playable code -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.textAlign = 'left'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -96,33 +97,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> +{{Compat("api.CanvasRenderingContext2D.textAlign")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index c2dadee8db..24253e2225 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -9,73 +9,74 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var> -</pre> + ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"; -<h3 id="Options">Options</h3> +### Options -<p>Valeurs possibles :</p> +Valeurs possibles : -<dl> - <dt>top</dt> - <dd>La ligne de base du texte est le haut du cadratin.</dd> - <dt>hanging</dt> - <dd>La ligne de base du texte est la ligne de base supérieure.</dd> - <dt>middle</dt> - <dd>La ligne de base du texte est le milieu du cadratin.</dd> - <dt>alphabetic</dt> - <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd> - <dt>ideographic</dt> - <dd>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.</dd> - <dt>bottom</dt> - <dd>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.</dd> -</dl> +- top + - : La ligne de base du texte est le haut du cadratin. +- 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. +- alphabetic + - : 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. +- 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. -<p>La valeur par défaut est <code>alphabetic</code>.</p> +La valeur par défaut est `alphabetic`. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> +### Utilisation de la propritété `textBaseline` -<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textBaseline</code> pour définir un réglage différent de ligne de base de texte.</p> +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. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> +```html +<canvas id="canvas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canvas = document.getElementById('canvas'); +```js +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.font = '48px serif'; ctx.textBaseline = 'hanging'; -ctx.strokeText('Hello world', 0, 100);</textarea> -</pre> +ctx.strokeText('Hello world', 0, 100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); +```js hidden +var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -98,33 +99,20 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.textBaseline")}}</p> +{{Compat("api.CanvasRenderingContext2D.textBaseline")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index c80bc02507..204a89deb2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -9,71 +9,72 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/transform --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> 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.</p> +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. -<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p> +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var> -</pre> + void ctx.transform(a, b, c, d, e, f); -<p>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></p> +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> -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>a (m11)</code></dt> - <dd>Échelle horizontale.</dd> - <dt><em><code>b (m12)</code></em></dt> - <dd>Inclinaison horizontale.</dd> - <dt><code>c (m21)</code></dt> - <dd>Inclinaison verticale.</dd> - <dt><code>d (m22)</code></dt> - <dd>Échelle verticale.</dd> - <dt><code>e (dx)</code></dt> - <dd>Déplacement horizontal.</dd> - <dt><code>f (dy)</code></dt> - <dd>Déplacement vertical.</dd> -</dl> +- `a (m11)` + - : Échelle horizontale. +- _`b (m12)`_ + - : Inclinaison horizontale. +- `c (m21)` + - : Inclinaison verticale. +- `d (m22)` + - : Échelle verticale. +- `e (dx)` + - : Déplacement horizontal. +- `f (dy)` + - : Déplacement vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3> +### Utilisation de la méthode `transform` -<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p> +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.transform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); -ctx.fillRect(0,0,100,100);</textarea> -</pre> +ctx.fillRect(0,0,100,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -99,34 +100,21 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p> +{{Compat("api.CanvasRenderingContext2D.transform")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- {{domxref("CanvasRenderingContext2D.setTransform()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 9b82274d6d..561d1897b1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -9,40 +9,39 @@ tags: - Reference translation_of: Web/API/CanvasRenderingContext2D/translate --- -<div>{{APIRef}}</div> +{{APIRef}} -<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> 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.</p> +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. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var> -</pre> + void ctx.translate(x, y); -<p><img alt="" src="canvas_grid_translate.png"></p> + -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt><code>x</code></dt> - <dd>Distance de déplacement dans le sens horizontal.</dd> - <dt>y</dt> - <dd>Distance de déplacement dans le sens vertical.</dd> -</dl> +- `x` + - : Distance de déplacement dans le sens horizontal. +- y + - : Distance de déplacement dans le sens vertical. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3> +### Utilisation de la méthode `translate` -<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p> +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.translate(50, 50); @@ -50,24 +49,26 @@ ctx.fillRect(0, 0, 100, 100); // Réinitialise la matrice de transformation en cours à la matrice identité ctx.setTransform(1, 0, 0, 1, 0, 0); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: 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" /> -</div> -<textarea id="code" class="playable-code"> +```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" /> +</div> +<textarea id="code" class="playable-code"> ctx.translate(50, 50); ctx.fillRect(0,0,100,100); -ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> -</pre> +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,33 +91,20 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> +``` -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> +{{ EmbedLiveSample('code_jouable', 700, 360) }} -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p> +{{Compat("api.CanvasRenderingContext2D.translate")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> -</ul> +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} |