diff options
Diffstat (limited to 'files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html')
| -rw-r--r-- | files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html | 19 |
1 files changed, 8 insertions, 11 deletions
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> |