diff options
Diffstat (limited to 'files/fr/web/api/canvasgradient')
| -rw-r--r-- | files/fr/web/api/canvasgradient/addcolorstop/index.md | 116 | ||||
| -rw-r--r-- | files/fr/web/api/canvasgradient/index.md | 51 |
2 files changed, 69 insertions, 98 deletions
diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index f88d7413a9..7af56a60ec 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -9,38 +9,37 @@ tags: - Reference translation_of: Web/API/CanvasGradient/addColorStop --- -<div>{{APIRef("Canvas API")}}</div> +{{APIRef("Canvas API")}} -<p>La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un <code>décalage</code> et une <code>couleur</code>, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée.</p> +La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="syntaxbox">void <var><em>gradient</em>.addColorStop(décalage, couleur);</var> -</pre> + void gradient.addColorStop(décalage, couleur); -<h3 id="Paramètres">Paramètres</h3> +### Paramètres -<dl> - <dt>décalage</dt> - <dd>Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage.</dd> - <dt>couleur</dt> - <dd>Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur <color> CSS.</dd> -</dl> +- décalage + - : Un nombre entre 0 et 1. Une erreur INDEX_SIZE_ERR est générée, si le nombre n'est pas dans cette plage. +- couleur + - : Une {{cssxref ("<color>")}} CSS. Une erreur SYNTAX_ERR est générée, si la valeur ne peut pas être analysée en tant que valeur \<color> CSS. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Utilisation_de_la_méthode_addColorStop">Utilisation de la méthode <code>addColorStop</code> </h3> +### Utilisation de la méthode `addColorStop` -<p>Il s'agit seulement d'un simple fragment de code qui utilise la méthode <code>addColorStop</code> avec un objet {{domxref("CanvasGradient")}}.</p> +Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><canvas id="canevas"></canvas> -</pre> +```html +<canvas id="canevas"></canvas> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">var canevas = document.getElementById('canevas'); +```js +var canevas = document.getElementById('canevas'); var ctx = canevas.getContext('2d'); var degrade = ctx.createLinearGradient(0, 0, 200, 0); @@ -48,26 +47,28 @@ degrade.addColorStop(0, 'green'); degrade.addColorStop(1, 'white'); ctx.fillStyle = degrade; ctx.fillRect(10, 10, 200, 100); -</pre> +``` -<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas : -<h4 id="code_jouable">Code jouable</h4> +#### Code jouable -<pre class="brush: html hidden"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> +```html hidden +<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); gradient.addColorStop(0,"green"); gradient.addColorStop(1,"white"); ctx.fillStyle = gradient; -ctx.fillRect(10,10,200,100);</textarea> -</pre> +ctx.fillRect(10,10,200,100);</textarea> +``` -<pre class="brush: js hidden">var canvas = document.getElementById("canvas"); +```js hidden +var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); @@ -90,35 +91,22 @@ edit.addEventListener("click", function() { textarea.addEventListener("input", drawCanvas); window.addEventListener("load", drawCanvas); -</pre> - -<p>{{ EmbedLiveSample('code_jouable', 700, 360) }}</p> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<p>{{Compat("api.CanvasGradient.addColorStop")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>L'interface ladéfinissant, {{domxref("CanvasGradient")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> -</ul> +``` + +{{ EmbedLiveSample('code_jouable', 700, 360) }} + +## Spécifications + +| Spécification | Statut | Commentaire | +| ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | + +## Compatibilité des navigateurs + +{{Compat("api.CanvasGradient.addColorStop")}} + +## Voir aussi + +- L'interface ladéfinissant, {{domxref("CanvasGradient")}} +- {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} +- {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md index c3422b011a..be3e32d89c 100644 --- a/files/fr/web/api/canvasgradient/index.md +++ b/files/fr/web/api/canvasgradient/index.md @@ -10,49 +10,32 @@ tags: - Reference translation_of: Web/API/CanvasGradient --- -<div>{{APIRef("Canvas API")}}</div> +{{APIRef("Canvas API")}} -<p>L'interface <code><strong>CanvasGradient</strong></code> représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}.</p> +L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. -<h2 id="Propriétés">Propriétés</h2> +## Propriétés -<p><em>Représentant un objet opaque, il n'y a aucune propriété exposée.</em></p> +_Représentant un objet opaque, il n'y a aucune propriété exposée._ -<h2 id="Méthodes">Méthodes</h2> +## Méthodes -<p><em>Il n'y a pas de méthode héritée.</em></p> +_Il n'y a pas de méthode héritée._ -<dl> - <dt>{{domxref("CanvasGradient.addColorStop()")}}</dt> - <dd>Ajoute un nouveau point d'arrêt, défini par un <code>décalage</code> et une <code>couleur</code>. Si le décalage n'est pas compris entre 0 et 1, une <code>INDEX_SIZE_ERR</code> est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une <code>SYNTAX_ERR</code> est générée.</dd> -</dl> +- {{domxref("CanvasGradient.addColorStop()")}} + - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> +| Spécification | Statut | Commentaire | +| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("api.CanvasGradient")}}</p> +{{Compat("api.CanvasGradient")}} -<h2 id="Voir_également">Voir également</h2> +## Voir également -<ul> - <li>Créateur dans {{domxref("CanvasRenderingContext2D")}}.</li> - <li>L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}.</li> -</ul> +- Créateur dans {{domxref("CanvasRenderingContext2D")}}. +- L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}. |