diff options
| author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
| commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
| tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/canvasrenderingcontext2d | |
| parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
| download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip | |
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids
* Remove unecessary hidden
* Remove useless span filled with useless attributes / ids
* Remove useless font
* Remove notranslate
* Remove id in other elements than headings
* Remove name attributes
* Remove <pre><code> for JS w/ language-js class
* Remove <pre><code> for HTML w/ language-html class
* Remove <pre><code> for other lang w/ language-* class
* Rm highlighted line in code samples
* fix links, internal, external, absolute URLs
* missing file from last commit
* Fix styles errors apart from table + some classes
* Fix notes and warnings (+ some other :x)
* fix typo during merge which broke a doc
* aand forgot a conflict
* fix remaining classes of errors except dls and images
* Fix dls
* Fix images (deki/mozillademos) and remaining style issues
* Remove script tag from svg file
* Remove script tag from svg fileS
* Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/canvasrenderingcontext2d')
39 files changed, 238 insertions, 350 deletions
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html index c0e3642253..d51cb083df 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html @@ -26,39 +26,38 @@ translation_of: Web/API/CanvasRenderingContext2D/arc <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>(<font face="Consolas, Liberation Mono, Courier, monospace">angle départ)</font></em></dt> + <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> (<font face="Consolas, Liberation Mono, Courier, monospace">sens anti-horaire)</font></em> {{optional_inline}}</dt> + <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> <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_arc_method" name="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> +<h3 id="Using_the_arc_method">En utilisant la méthode <code>arc</code> </h3> <p>Voici un code simple permettant de dessiner un cercle .</p> <h4 id="HTML">HTML</h4> -<pre class="brush: html line-numbers language-html"><code class="language-html"><canvas id="canvas"></canvas></code></pre> +<pre class="brush: html line-numbers"><canvas id="canvas"></canvas></pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js line-numbers language-js"><code class="language-js">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, 2 * Math.PI); -ctx.stroke();</code></pre> +ctx.stroke();</pre> <p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -97,20 +96,15 @@ window.addEventListener("load", drawCanvas); <p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> -<h3 id="Different_shapes_demonstrated" name="Different_shapes_demonstrated">Exemple avec différentes formes</h3> +<h3 id="Different_shapes_demonstrated">Exemple avec différentes formes</h3> <p>Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par <code>arc()</code>.</p> -<div class="hidden"> -<h6 id="HTML_2">HTML</h6> -<pre class="brush: html"><canvas id="canvas" width="150" height="200"></canvas> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="200"></canvas> </pre> -<h6 id="JavaScript_2">JavaScript</h6> -</div> - -<pre class="brush: js line-numbers language-js"><code class="language-js">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Draw shapes @@ -132,9 +126,9 @@ for (var i = 0; i < 4; i++) { ctx.stroke(); } } -}</code></pre> +}</pre> -<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "canvas_arc.png") }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -163,7 +157,7 @@ for (var i = 0; i < 4; i++) { <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")}} ( <span>"L'index ou la taille est négatif ou supérieur à la valeur autorisée" ).</span></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> <h2 id="Voir_aussi">Voir aussi</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html index ba95381f7f..e59e5be4a4 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/beginPath <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Premier chemin @@ -49,10 +49,9 @@ ctx.stroke(); <p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -73,7 +72,7 @@ ctx.lineTo(120, 120); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -97,9 +96,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 460) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html index 1bea09a84e..f5e140589e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -96,7 +96,7 @@ ctx.fill(); <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> -<pre class="brush: js; highlight:[6]"> +<pre class="brush: js"> const canvas = document.getElementById("canvas"); const contexte2D = canvas.getContext("2d"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html index 3dcb9a14fb..7bf854557e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect <h2 id="Notes_d'utilisation">Notes d'utilisation</h2> -<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="https://developer.mozilla.org/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> +<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> <h2 id="Exemples">Exemples</h2> @@ -48,7 +48,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[11]">var canevas = document.getElementById("canvas"); +<pre class="brush: js">var canevas = document.getElementById("canvas"); var ctx = canevas.getContext("2d"); ctx.beginPath(); @@ -66,10 +66,9 @@ ctx.clearRect(10, 10, 100, 100); <p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -85,7 +84,7 @@ ctx.stroke(); ctx.clearRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -109,9 +108,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html index 065b755712..ee83dd8db5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -40,10 +40,9 @@ ctx.stroke(); <p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -57,7 +56,7 @@ ctx.closePath(); // draws last line of the triangle ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -81,9 +80,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 400) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html index a68f3dee2d..d8bab917a3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/14681/mdn-canvas-linearGradient.png" style="height: 121px; width: 264px;"></p> +<p><img alt="" src="mdn-canvas-lineargradient.png"></p> <p>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p> @@ -58,7 +58,7 @@ translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var gradient = ctx.createLinearGradient(0, 0, 200, 0); @@ -70,10 +70,9 @@ ctx.fillRect(10, 10, 200, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -86,7 +85,7 @@ ctx.fillStyle = gradient; ctx.fillRect(10,10,200,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -110,9 +109,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html index 7c79ad92e9..e4dae769e1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html @@ -36,7 +36,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_direction_property" name="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> +<h3 id="Using_the_direction_property">Utilisation de la propriété <code>direction</code></h3> <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> @@ -57,10 +57,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.direction = 'ltr'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -95,9 +94,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{EmbedLiveSample('code_jouable', 700, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html index b5c1f9c2e2..92bc5a9b9d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -20,7 +20,7 @@ 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="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p> +<p><img alt="drawImage" src="canvas_drawimage.jpg"></p> <h3 id="Paramètres">Paramètres</h3> @@ -33,7 +33,7 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLar <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><font face="Consolas, Liberation Mono, Courier, monospace">dHauteur</font></dt> + <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> @@ -65,14 +65,14 @@ void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLar <h4 id="HTML">HTML</h4> <pre class="brush: html"><canvas id="canvas"></canvas> - <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" + <img id="source" src="rhino.jpg" width="300" height="227"> </div> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById("source"); @@ -81,11 +81,10 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> - <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> +<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" /> @@ -95,7 +94,7 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var image = document.getElementById('source'); var textarea = document.getElementById("code"); @@ -120,9 +119,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> @@ -152,8 +150,8 @@ window.addEventListener("load", drawCanvas); <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="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">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="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP" title="en/CORS_Enabled_Image#What_is_a_.22tainted.22_canvas.3F">corrompre le canevas</a>.</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> <h2 id="Notes">Notes</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html index d2c74041da..49a19c218c 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_ellipse_method" name="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> +<h3 id="Using_the_ellipse_method">Utilisation de la méthode <code>ellipse</code></h3> <p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p> @@ -62,10 +62,9 @@ ctx.stroke(); <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> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -76,7 +75,7 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -100,9 +99,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html index 4c30af5f8a..f71a817ce6 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html @@ -45,7 +45,7 @@ void <var><em>ctx</em>.fill(path[, fillRule]);</var> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -53,10 +53,9 @@ ctx.fill(); <p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3> @@ -121,10 +119,9 @@ ctx.stroke();</pre> <p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -145,7 +142,7 @@ ctx.fill("nonzero"); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -169,9 +166,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{EmbedLiveSample('Playable_code_2', 700, 360)}}</p> +<p>{{EmbedLiveSample('code_jouable_2', 700, 360)}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html index be4faa09cd..cd98d786b5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -24,7 +24,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect <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><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></code></dt> + <dt><code>largeur</code></dt> <dd>La largeur du rectangle.</dd> <dt><code>hauteur</code></dt> <dd>La hauteur de rectangle.</dd> @@ -43,7 +43,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100); @@ -54,10 +54,9 @@ ctx.fillRect(10, 10, 100, 100); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -67,7 +66,7 @@ ctx.fillStyle = "green"; ctx.fillRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -91,9 +90,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html index 5af7911951..598ec204af 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -35,7 +35,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillStyle <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_fillStyle_property" name="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> +<h3 id="Using_the_fillStyle_property">Utiliser la propriété <code>fillStyle</code> pour définir une couleur différente</h3> <p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p> @@ -55,10 +55,9 @@ ctx.fillRect(10, 10, 100, 100); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -92,19 +91,17 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Un_exemple_fillStyle_avec_les_boucles_for">Un exemple <code>fillStyle</code> avec les boucles <code>for</code></h3> <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> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> </div> -<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +<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++){ ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + @@ -116,7 +113,7 @@ for (var i = 0; i < 6; i++){ <p>Le résultat devrait ressembler à ça:</p> -<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> +<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "canvas_fillstyle.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html index 6f7801366a..fefd1c875a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillText <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.font = '48px serif'; @@ -58,10 +58,9 @@ ctx.fillText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.font = "48px serif"; ctx.fillText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,9 +94,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html index 5c63c6a082..34b90f9580 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.html @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/font --- <div>{{APIRef}}</div> -<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" title="fr/CSS/font">police CSS</a>. La police par défaut est 10px sans-serif.</p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -47,10 +47,9 @@ ctx.strokeText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -60,7 +59,7 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -84,9 +83,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3> diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html index 6ef689a878..94059efba8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <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> -<p><span id="result_box" lang="fr"><span>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.</span></span></p> +<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> <h2 id="Syntaxe">Syntaxe</h2> @@ -53,7 +53,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <h3 id="Utilisation_de_la_méthode_getImageData">Utilisation de la méthode <code>getImageData</code></h3> -<p>Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez <a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a> et l'objet {{domxref("ImageData")}}.</p> +<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> <h4 id="HTML">HTML</h4> @@ -62,7 +62,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -95,7 +95,7 @@ console.log(ctx.getImageData(50, 50, 100, 100)); <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><span class="short_text" id="result_box" lang="fr"><span>L'interface le définissant</span></span> : {{domxref("CanvasRenderingContext2D")}}.</li> + <li>L'interface le définissant : {{domxref("CanvasRenderingContext2D")}}.</li> <li>{{domxref("ImageData")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> + <li><a href="/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas">Manipulation de pixels avec canvas</a></li> </ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html index c8765a8302..5b404da724 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -31,7 +31,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> +<h3 id="Using_the_globalAlpha_property">Utilisation de la propriété <code>globalAlpha</code></h3> <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> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.globalAlpha = 0.5; @@ -56,10 +56,9 @@ ctx.fillRect(50, 50, 100, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 100, 100);</textarea> </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); +<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacement = document.getElementById('effacement'); @@ -98,11 +97,10 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 380) }}</p> -<h3 id="A_globalAlpha_example" name="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> +<h3 id="A_globalAlpha_example">Un exemple de <code>globalAlpha</code></h3> <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> @@ -130,11 +128,9 @@ for (i = 0; i < 7; i++){ } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> -<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html index 41d0231381..7291e23e2b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.globalCompositeOperation = 'xor'; diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html index 3e690113b0..d9064377d8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -28,82 +28,47 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="exemples">exemples</h2> -<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Utilisation de la propriété <code>imageSmoothingEnabled</code></h3> +<h3 id="désactiver_le_lissage_d_image">Désactiver le lissage d'image</h3> -<p>Ceci est juste un simple fragment de code utilisant la propriété <code>imageSmoothingEnabled</code> sur une image mise à l'échelle.</p> +<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> <h4 id="HTML">HTML</h4> -<pre class="brush: html"><canvas id="canevas"></canvas> +<pre class="brush: html"><canvas id="canvas" width="460" height="210"></canvas> </pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[7-10]">var canevas = document.getElementById('canevas'); -var ctx = canevas.getContext('2d'); +<pre class="brush: js;">const canvas = document.getElementById('canvas'); -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; +const ctx = canvas.getContext('2d'); +ctx.font = '16px sans-serif'; +ctx.textAlign = 'center'; + +const img = new Image(); +img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -}; -</pre> + const w = img.width, + h = img.height; -<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :</p> + ctx.fillText('Source', w * .5, 20); + ctx.drawImage(img, 0, 24, w, h); -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Code jouable</h6> + ctx.fillText('Smoothing = TRUE', w * 2.5, 20); + ctx.imageSmoothingEnabled = true; + ctx.drawImage(img, w, 24, w * 3, h * 3); -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> -<div class="<code>playable-buttons</code>"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> -</div> -<textarea id="code" class="<code>playable-code</code>" style="height:140px;"> -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; -img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -};</textarea> + ctx.fillText('Smoothing = FALSE', w * 5.5, 20); + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, w * 4, 24, w * 3, h * 3); +}; </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); -var ctx = canevas.getContext('2d'); -var textarea = document.getElementById('code'); -var effacer = document.getElementById('effacer'); -var modifier = document.getElementById('modifier'); -var code = textarea.value; - -function dessinerCanevas() { - ctx.clearRect(0, 0, canevas.width, canevas.height); - eval(textarea.value); -} - -effacer.addEventListener('click', function() { - textarea.value = code; - dessinerCanevas(); -}); - -modifier.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', dessinerCanevas); -window.addEventListener('load', dessinerCanevas); -</pre> -</div> +<h4 id="résultat">Résultat</h4> -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> +<p>{{ EmbedLiveSample('désactiver_le_lissage_d_image', 700, 240) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html index ff51926e44..73758824a3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/index.html @@ -18,13 +18,13 @@ translation_of: Web/API/CanvasRenderingContext2D var ctx = canevas.getContext('2d'); </pre> -<p><span style="line-height: 1.5;">Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple :</span></p> +<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><span style="line-height: 1.5;">Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le </span><a href="https://developer.mozilla.org/fr-FR/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">tutoriel canvas</a><span style="line-height: 1.5;"> a davantage d'informations, d'exemples et de ressources également.</span></p> +<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> @@ -162,7 +162,7 @@ ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d' <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="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <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> @@ -349,7 +349,7 @@ ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d' <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" title="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> + <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> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html index e3aab0f6ad..ee87a2aafe 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html @@ -34,7 +34,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_lineCap_property" name="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> +<h3 id="Using_the_lineCap_property">Utilisation de la propriété <code>lineCap</code></h3> <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> @@ -45,7 +45,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[7]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.beginPath(); @@ -58,10 +58,9 @@ ctx.stroke(); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -75,7 +74,7 @@ ctx.lineTo(100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canevas = document.getElementById('canevas'); +<pre class="brush: js hidden">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var zoneTexte = document.getElementById('code'); var effacer = document.getElementById('effacer'); @@ -99,11 +98,10 @@ modifier.addEventListener('click', function() { zoneTexte.addEventListener('input', dessinerCanevas); window.addEventListener('load', dessinerCanevas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> -<h3 id="A_lineCap_example" name="A_lineCap_example">Un exemple de <code>lineCap</code></h3> +<h3 id="A_lineCap_example">Un exemple de <code>lineCap</code></h3> <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> @@ -133,11 +131,9 @@ for (var i = 0; i < lineCap.length; i++) { } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canevas" width="150" height="150"></canvas></pre> -<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html index ca4fbd4f4e..93b38bb13d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin <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> -<p><img alt="" src="https://mdn.mozillademos.org/files/237/Canvas_linejoin.png" style="float: right; height: 190px; width: 190px;"></p> +<p><img alt="" src="canvas_linejoin.png"></p> <dl> <dt><code>"round"</code> (rond)</dt> @@ -53,7 +53,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineJoin <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight[5]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 20; @@ -74,9 +74,7 @@ ctx.stroke(); <p>L'exemple dessine 3 tracés différents, illustrant chacune des trois valeurs de <code>lineJoin</code>.</p> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> <pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round', 'bevel', 'miter']; @@ -94,7 +92,7 @@ for (let i = 0; i < lineJoin.length; i++) { } </pre> -<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> +<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "canvas_linejoin.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html index 042f7e9b2a..6ed54f222e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html @@ -40,7 +40,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); @@ -51,10 +51,9 @@ ctx.stroke(); <p>Éditez le code suivant pour voir les changements en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.lineTo(100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html index ac7e616bbc..ef2a1af3a9 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -13,7 +13,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText <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> -<h2 id="Syntax" name="Syntax">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> <pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre> diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html index 577b44b58b..958b41c5aa 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html @@ -38,7 +38,7 @@ translation_of: Web/API/CanvasRenderingContext2D/moveTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -49,10 +49,9 @@ ctx.stroke(); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -64,7 +63,7 @@ ctx.lineTo(200, 50); ctx.stroke()</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,9 +87,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html index 4978bdd735..7587faa897 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html @@ -51,7 +51,7 @@ translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[7]">const canevas = document.getElementById("canvas"); +<pre class="brush: js">const canevas = document.getElementById("canvas"); const contexte2D= canevas.getContext("2d"); // courbe quadratique de Bézier @@ -76,7 +76,7 @@ contexte2D.fill(); <h4 id="Résultat">Résultat</h4> -<p>Dans cet exemple, le <span style="color: red;">point de contrôle est rouge</span> et les <span style="color: blue;">points de départ et d'arrivée sont en bleu</span>.</p> +<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> <p>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p> @@ -93,7 +93,7 @@ contexte2D.fill(); <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> -<pre class="brush: js; highlight:[6]">const canevas = document.getElementById("canvas"); +<pre class="brush: js">const canevas = document.getElementById("canvas"); const contexte2D = canevas.getContext("2d"); contexte2D.beginPath(); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html index 3ae8d57f48..8a822dd115 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html @@ -43,7 +43,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); @@ -51,10 +51,9 @@ ctx.fill(); <p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -64,7 +63,7 @@ ctx.rect(10, 10, 100, 100); ctx.fill();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -88,9 +87,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html index 64b4ae5b54..5cde5f8af5 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rotate <pre class="syntaxbox">void <var><em>ctx</em>.rotate(angle);</var> </pre> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/233/Canvas_grid_rotate.png" style="float: right;"></p> +<p><img alt="" src="canvas_grid_rotate.png"></p> <h3 id="Paramètres">Paramètres</h3> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/rotate <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rotate(45 * Math.PI / 180); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(70,0,100,30); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,9 +91,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html index b019de39b6..d91e31ffbe 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/save/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/save <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas'); +<pre class="brush: js">const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // On sauvegarde l'état par défaut diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html index 57ad5c7c11..cb24a37aa0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/scale <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.scale(10, 3); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(10,10,10,10); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,18 +91,16 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h3 id="Utilisation_de_scale_pour_un_retournement_horizontal_ou_vertical">Utilisation de <code>scale</code> pour un retournement horizontal ou vertical</h3> <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> -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> +<h4 id="code_jouable_2">Code jouable 2</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -115,7 +112,7 @@ ctx.fillText("Hello world!", -320, 120); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -139,9 +136,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable_2', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html index f3d654fa01..e8cdb0416e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -19,7 +19,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <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> <div class="note"> -<p>Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> +<p><strong>Note :</strong> Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.beginPath(); @@ -69,10 +69,9 @@ ctx.stroke(); <p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -91,7 +90,7 @@ ctx.lineTo(400, 150); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -115,9 +114,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 10, 410) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 10, 410) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html index d5ca251a9d..e66241605d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html @@ -52,7 +52,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.setTransform(1, 1, 0, 1, 0, 0); @@ -61,10 +61,9 @@ ctx.fillRect(0, 0, 100, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.setTransform(1,1,0,1,0,0); ctx.fillRect(0,0,100,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -98,9 +97,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html index cd87ecd629..fd836674ad 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html @@ -33,7 +33,7 @@ void <var><em>ctx</em>.stroke(path);</var> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.rect(10, 10, 100, 100); ctx.stroke(); @@ -41,10 +41,9 @@ ctx.stroke(); <p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -54,7 +53,7 @@ ctx.rect(10, 10, 100, 100); ctx.stroke();</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -78,9 +77,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html index d4dfb4f299..14620b3c66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect <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><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></dt> + <dt>largeur</dt> <dd>La largeur du rectangle.</dd> <dt><code>hauteur</code></dt> <dd>La hauteur de rectangle.</dd> @@ -44,7 +44,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +<pre class="brush: js">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeStyle = "green"; @@ -53,10 +53,9 @@ ctx.strokeRect(10, 10, 100, 100); <p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -66,7 +65,7 @@ ctx.strokeStyle = "green"; ctx.strokeRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,9 +89,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html index 2885a27782..fa703e43d0 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -29,7 +29,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeStyle <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_strokeStyle_property" name="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> +<h3 id="Using_the_strokeStyle_property">Utiliser la propriété <code>strokeStyle</code> pour définir une couleur différente</h3> <p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p> @@ -49,10 +49,9 @@ ctx.strokeRect(10, 10, 100, 100); <p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -62,7 +61,7 @@ ctx.strokeStyle = 'blue'; ctx.strokeRect(10, 10, 100, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -86,11 +85,10 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> -<h3 id="A_strokeStyle_example" name="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> +<h3 id="A_strokeStyle_example">Un exemple <code>strokeStyle</code></h3> <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> @@ -107,13 +105,11 @@ for (var i = 0; i < 6; i++) { } </pre> -<div class="hidden"> -<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> -</div> +<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> <p>Le résultat devrait ressembler à ça:</p> -<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}</p> +<p>{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html index a118f7a7ab..c1b20a2580 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -49,7 +49,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[5]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.font = '48px serif'; @@ -58,10 +58,9 @@ ctx.strokeText('Hello world', 50, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -71,7 +70,7 @@ ctx.font = "48px serif"; ctx.strokeText("Hello world", 50, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -95,9 +94,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html index 5da35b696a..ba3b152f70 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_textAlign_property" name="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> +<h3 id="Using_the_textAlign_property">Utilisation de la propriété <code>textAlign</code></h3> <p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p> @@ -60,10 +60,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Playable code</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.textAlign = 'left'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -98,9 +97,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html index 868bc88ac9..c2dadee8db 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -41,7 +41,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline <h2 id="Exemples">Exemples</h2> -<h3 id="Using_the_textBaseline_property" name="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> +<h3 id="Using_the_textBaseline_property">Utilisation de la propritété <code>textBaseline</code></h3> <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> @@ -62,10 +62,9 @@ ctx.strokeText('Hello world', 0, 100); <p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -76,7 +75,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js hidden">var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var textarea = document.getElementById('code'); var reset = document.getElementById('reset'); @@ -100,9 +99,8 @@ edit.addEventListener('click', function() { textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html index 97bd66ac77..c80bc02507 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html @@ -52,7 +52,7 @@ translation_of: Web/API/CanvasRenderingContext2D/transform <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.transform(1, 1, 0, 1, 0, 0); @@ -61,10 +61,9 @@ ctx.fillRect(0, 0, 100, 100); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -74,7 +73,7 @@ ctx.transform(1,1,0,1,0,0); ctx.fillRect(0,0,100,100);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -101,9 +100,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html index 5f0afeb073..9b82274d6d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate <pre class="syntaxbox">void <var><em>ctx</em>.translate(x, y);</var> </pre> -<p><img alt="" class="internal" src="https://mdn.mozillademos.org/files/234/Canvas_grid_translate.png" style="float: right;"></p> +<p><img alt="" src="canvas_grid_translate.png"></p> <h3 id="Paramètres">Paramètres</h3> @@ -42,7 +42,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +<pre class="brush: js">var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); ctx.translate(50, 50); @@ -54,10 +54,9 @@ ctx.setTransform(1, 0, 0, 1, 0, 0); <p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p> -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> +<h4 id="code_jouable">Code jouable</h4> -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<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" /> @@ -68,7 +67,7 @@ ctx.fillRect(0,0,100,100); ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> </pre> -<pre class="brush: js">var canvas = document.getElementById("canvas"); +<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -92,9 +91,8 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); </pre> -</div> -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> +<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> <h2 id="Spécifications">Spécifications</h2> |