diff options
Diffstat (limited to 'files/fr/web/api/canvasrenderingcontext2d')
40 files changed, 6032 insertions, 0 deletions
diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.html b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html new file mode 100644 index 0000000000..28219272c1 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.html @@ -0,0 +1,174 @@ +--- +title: CanvasRenderingContext2D.arc() +slug: Web/API/CanvasRenderingContext2D/arc +tags: + - Canvas + - CanvasRenderingContext2D + - Method + - Reference +translation_of: Web/API/CanvasRenderingContext2D/arc +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.arc()</code></strong> de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions <em>(x, y)</em> et avec un rayon <em>r</em> qui démarre à <em>angleDépart</em> et qui finit à <em>angleFin</em>, dans la direction de <em>sensAntiHoraire </em>(par défaut en sens horaire).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.arc(x, y, rayon, angleDépart, angleFin, sensAntiHoraire);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>La position en x du centre de l'arc.</dd> + <dt><code>y</code></dt> + <dd>La position en y du centre de l'arc.</dd> + <dt><code>radius</code><em> (rayon)</em></dt> + <dd>Le rayon de l'arc.</dd> + <dt><code>startAngle</code> <em>(<font face="Consolas, Liberation Mono, Courier, monospace">angle départ)</font></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> + <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> + +<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> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js line-numbers language-js"><code class="language-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> + +<p>Modifiez le code ci-dessous et voyez les changements en direct sur le canvas :</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.arc(50, 50, 50, 0, 2 * Math.PI, false); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Different_shapes_demonstrated" name="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 style="display: none;"> +<h6 id="HTML_2">HTML</h6> + +<pre class="brush: html"><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'); +var ctx = canvas.getContext('2d'); + +// Draw shapes +for (var i = 0; i < 4; i++) { + for(var j = 0; j < 3; j++) { + ctx.beginPath(); + var x = 25 + j * 50; // x coordinate + var y = 25 + i * 50; // y coordinate + var radius = 20; // Arc radius + var startAngle = 0; // Starting point on circle + var endAngle = Math.PI + (Math.PI * j) /2; // End point on circle + var anticlockwise = i % 2 == 1; // Draw anticlockwise + + ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); + + if (i > 1) { + ctx.fill(); + } else { + ctx.stroke(); + } + } +}</code></pre> + +<p>{{ EmbedLiveSample('Different_shapes_demonstrated', 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png") }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.arc")}}</p> +<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> + +<p>Avec Gecko 2.0 {{geckoRelease("2.0")}}:</p> + +<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> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html new file mode 100644 index 0000000000..4df338c796 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.html @@ -0,0 +1,132 @@ +--- +title: CanvasRenderingContext2D.beginPath() +slug: Web/API/CanvasRenderingContext2D/beginPath +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/beginPath +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.beginPath()</code></strong> de l'API Canvas 2D permet de commencer un nouveau chemin<em> e</em>n vidant la liste des sous-chemins. Appelez cette méthode quand vous voulez créer un nouveau chemin.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.beginPath();</var> +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_beginPath">Utiliser la méthode <code>beginPath</code></h3> + +<p>Ceci est un simple snippet de code qui utilise la méthode <code>beginPath</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5,12]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +// Premier chemin +ctx.beginPath(); +ctx.strokeStyle = 'blue'; +ctx.moveTo(20, 20); +ctx.lineTo(200, 20); +ctx.stroke(); + +// Second chemin +ctx.beginPath(); +ctx.strokeStyle = 'green'; +ctx.moveTo(20, 20); +ctx.lineTo(120, 120); +ctx.stroke(); +</pre> + +<p>Éditez le code ci-dessous pour voir vos changements directemment apportés au canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:200px"> +// First path +ctx.beginPath(); +ctx.strokeStyle = 'blue'; +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.stroke(); + +// Second path +ctx.beginPath(); +ctx.strokeStyle = 'green'; +ctx.moveTo(20,20); +ctx.lineTo(120, 120); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 460) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.beginPath")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.closePath()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html new file mode 100644 index 0000000000..392c7360e1 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.html @@ -0,0 +1,147 @@ +--- +title: CanvasRenderingContext2D.bezierCurveTo() +slug: Web/API/CanvasRenderingContext2D/bezierCurveTo +tags: + - 2D + - API + - Bézier + - Canevas + - Canvas + - CanvasRenderingContext2D + - Courbe + - Courbe cubique + - Courbe cubique de Bézier + - Courbe de Bézier + - Méthode + - contexte +translation_of: Web/API/CanvasRenderingContext2D/bezierCurveTo +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.bezierCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> cubique au sous-chemin courant. Elle requiert trois points : les deux premiers sont des points de contrôle et le troisième est le point d'arrivée. Le point de départ est le dernier point dans le chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer une courbe de Bézier.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <em>contexte2D</em>.bezierCurveTo(<em>pointContrôle1X</em>, <em>pointContrôle1Y</em>, <em>pointContrôle2X</em>, <em>pointContrôle2Y</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>); +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>pointContrôle1X</code></dt> + <dd>La coordonnée en x du premier point de contrôle.</dd> + <dt><code>pointContrôle1Y</code></dt> + <dd>La coordonnée en y du premier point de contrôle.</dd> + <dt><code>pointContrôle2X</code></dt> + <dd>La coordonnée en x du second point de contrôle.</dd> + <dt><code>pointContrôle2Y</code></dt> + <dd>La coordonnée en y du second point de contrôle.</dd> + <dt><code>pointArrivéeX</code></dt> + <dd>La coordonnée en x du point d'arrivée.</dd> + <dt><code>pointArrivéeY</code></dt> + <dd>La coordonnée en y du point d'arrivée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Comment_bezierCurveTo_fonctionne">Comment bezierCurveTo fonctionne</h3> + +<p>Cet exemple montre comment une courbe cubique de Bézier est dessinée.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[14]">// Définit le canevas et son contexte 2D +const canevas = document.getElementById("canvas"); +const contexte2D = canevas.getContext("2d"); + +// Define the points as {x, y} +let pDépart = { x: 50, y: 20 }; +let pContrôle1 = { x: 230, y: 30 }; +let pContrôle2 = { x: 150, y: 80 }; +let pArrivée = { x: 250, y: 100 }; + +// Courbe cubique de Bézier +contexte2D.beginPath(); +contexte2D.moveTo(start.x, start.y); +contexte2D.bezierCurveTo(pContrôle1.x, pContrôle1.y, pContrôle2.x, pContrôle2.y, pArrivée.x, pArrivée.y); +contexte2D.stroke(); + +// Points de départ et d'arrivée +contexte2D.fillStyle = 'blue'; +contexte2D.beginPath(); +contexte2D.arc(pDépart.x, pDépart.y, 5, 0, 2 * Math.PI); // Point de départ +contexte2D.arc(pArrivée.x, pArrivée.y, 5, 0, 2 * Math.PI); // Point d'arrivée +contexte2D.fill(); + +// Points de contrôle +contexte2D.fillStyle = 'red'; +contexte2D.beginPath(); +contexte2D.arc(pContrôle1.x, pContrôle1.y, 5, 0, 2 * Math.PI); // Point de contrôle 1 +contexte2D.arc(pContrôle2.x, pContrôle2.y, 5, 0, 2 * Math.PI); // Point de contrôle 2 +contexte2D.fill();</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>Dans cet exemple, les <span style="color: red;">points de contrôle sont rouges</span> et les <span style="color: blue;">points de départ et d'arrivée sont bleus</span>.</p> + +<p>{{ EmbedLiveSample('How_bezierCurveTo_works', 315, 165) }}</p> + +<h3 id="Une_simple_courbe_cubique_de_Bézier">Une simple courbe cubique de Bézier</h3> + +<p>Cet exemple dessine une simple courbe cubique de Bézier en utilisant <code>bezierCurveTo()</code>.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>La courbe débute au point spécifiée 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]">const canevas = document.getElementById("canvas"); +const contexte2D = canevas.getContext("2d"); + +contexte2D.beginPath(); +contexte2D.moveTo(30, 30); +contexte2D.bezierCurveTo(120,160, 180,10, 220,140); +contexte2D.stroke();</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{ EmbedLiveSample('A_simple_Bézier_curve', 700, 180) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beziercurveto", "CanvasRenderingContext2D.beziercurveto")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.bezierCurveTo")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve">L'article Wikipédia sur les courbes de Bézier</a></li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html new file mode 100644 index 0000000000..cb17a790ff --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.html @@ -0,0 +1,62 @@ +--- +title: CanvasRenderingContext2D.canvas +slug: Web/API/CanvasRenderingContext2D/canvas +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/canvas +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D.canvas</strong></code> est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em></var>.canvas;</pre> + +<h2 id="Exemples">Exemples</h2> + +<p>Soit cet élément {{HTMLElement("canvas")}}:</p> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<p>Vous pouvez obtenir la référence à l'élément <code>canvas</code> grâce à <code>CanvasRenderingContext2D</code> en utilisant la propriété <code>canvas</code> :</p> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.canvas // HTMLCanvasElement +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.canvas")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html new file mode 100644 index 0000000000..78c8ff8104 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.html @@ -0,0 +1,145 @@ +--- +title: CanvasRenderingContext2D.clearRect() +slug: Web/API/CanvasRenderingContext2D/clearRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/clearRect +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.clearRect()</code></strong> de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées <em>(x, y)</em> et par les tailles <em>(largeur, hauteur)</em>, supprimant tout contenu précédemment dessiné.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.clearRect(x, y, largeur, hauteur);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>La coordonnée sur l'axe des <em>x</em> du point de départ du rectangle.</dd> + <dt><code>y</code></dt> + <dd>La coordonnée sur l'axe des <em>y</em> du point de départ du rectangle.</dd> + <dt><code>largeur</code></dt> + <dd>La largeur du rectangle.</dd> + <dt><code>hauteur</code></dt> + <dd>La hauteur de rectangle.</dd> +</dl> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_clearRect">Utilisation de la méthode <code>clearRect</code></h3> + +<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>clearRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[11]">var canevas = document.getElementById("canvas"); +var ctx = canevas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // dessine la dernière ligne du triangle +ctx.stroke(); + +ctx.clearRect(10, 10, 100, 100); + +// effacer le canevas entièrement +// ctx.clearRect(0, 0, canvas.width, canvas.height); +</pre> + +<p>Modifiez le code suivant et voyez vos changements en direct dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // dessine la dernière ligne du triangle +ctx.stroke(); + +ctx.clearRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.clearRect")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html new file mode 100644 index 0000000000..b3748ccbd7 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.html @@ -0,0 +1,166 @@ +--- +title: CanvasRenderingContext2D.closePath() +slug: Web/API/CanvasRenderingContext2D/closePath +tags: + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/closePath +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.closePath()</code></strong> de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.closePath();</var> +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_closePath">Utiliser la méthode <code>closePath</code></h3> + +<p>Voici un exemple d'utilisation de la méthode closePath.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[8]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // ferme le triangle par une ligne droite +ctx.stroke(); +</pre> + +<p>Editez le code ci-dessous et observez les répercutions dans le canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:140px;"> +ctx.beginPath(); +ctx.moveTo(20,20); +ctx.lineTo(200,20); +ctx.lineTo(120,120); +ctx.closePath(); // draws last line of the triangle +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.beginPath()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html new file mode 100644 index 0000000000..76fb50df9f --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.html @@ -0,0 +1,150 @@ +--- +title: CanvasRenderingContext2D.createLinearGradient() +slug: Web/API/CanvasRenderingContext2D/createLinearGradient +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Gradients + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/createLinearGradient +--- +<div>{{APIRef}}</div> + +<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>Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire.</p> + +<p>NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect".</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">CanvasGradient <var><em>ctx</em>.createLinearGradient(x0, y0, x1, y1);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x0</code></dt> + <dd>La coordonnée sur l'axe des x du point de début.</dd> + <dt><code>y0</code></dt> + <dd>La coordonnée sur l'axe des y du point de début.</dd> + <dt><code>x1</code></dt> + <dd>La coordonnée sur l'axe des x du point de fin.</dd> + <dt><code>y1</code></dt> + <dd>La coordonnée sur l'axe des y du point de fin.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<dl> + <dt>{{domxref("CanvasGradient")}}</dt> + <dd>Un <code>CanvasGradient linéaire</code> initialisé avec la ligne spécifiée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_createLinearGradient">Utilisation de la méthode <code>createLinearGradient</code></h3> + +<p>Ceci est seulement un simple fragment de code qui utilise la méthode <code>createLinearGradient</code> pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +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); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><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> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.createLinearGradient")}}</p> +<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> + +<ul> + <li>A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant <code>NOT_SUPPORTED_ERR</code> au lieu de <code>SYNTAX_ERR</code>.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.html b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html new file mode 100644 index 0000000000..fbd78dccc5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.html @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.direction +slug: Web/API/CanvasRenderingContext2D/direction +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/direction +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.direction</code></strong> de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.direction = "ltr" || "rtl" || "inherit";</var> +</pre> + +<h3 id="Options">Options</h3> + +<p>Valeurs possibles :</p> + +<dl> + <dt>ltr</dt> + <dd>La direction du texte est de gauche à droite.</dd> + <dt>rtl</dt> + <dd>La direction du texte est de droite à gauche.</dd> + <dt>inherit</dt> + <dd>La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié.</dd> +</dl> + +<p>La valeur par défaut est <code>inherit</code>.</p> + +<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> + +<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> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.direction = 'ltr'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = '48px serif'; +ctx.direction = 'ltr'; +ctx.strokeText('Hello world', 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.direction")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html new file mode 100644 index 0000000000..1d217a65b7 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.html @@ -0,0 +1,236 @@ +--- +title: CanvasRenderingContext2D.drawImage() +slug: Web/API/CanvasRenderingContext2D/drawImage +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/drawImage +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.drawImage()</code></strong> de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.drawImage(image, dx, dy);</var> +void <var><em>ctx</em>.drawImage(image, dx, dy, dLargeur, dHauteur);</var> +void <var><em>ctx</em>.drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur);</var> +</pre> + +<p><img alt="drawImage" src="https://mdn.mozillademos.org/files/225/Canvas_drawimage.jpg" style="float: right;"></p> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>image</code></dt> + <dd>Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}.</dd> + <dt><code>dx</code></dt> + <dd>La coordonnée <code>x</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> + <dt><code>dy</code></dt> + <dd>La coordonnée <code>y</code> dans le canvas de destination où placer le coin supérieur gauche de l'<code>image</code> source.</dd> + <dt><code>dLargeur</code></dt> + <dd>La largeur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">dHauteur</font></dt> + <dd>La hauteur de l'<code>image</code> dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale.</dd> + <dt><code>sx</code></dt> + <dd>La coordonnée <code>x</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> + <dt><code>sy</code></dt> + <dd>La coordonnée <code>y</code> du bord en haut à gauche de la partie de l'<code>image</code> source à dessiner dans le contexte du canvas.</dd> + <dt><code>sLargeur</code></dt> + <dd>La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins <code>sx</code>, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (<code>sx</code> ; <code>sy</code>) et jusqu'au bord en bas à droite.</dd> + <dt><code>sHauteur</code></dt> + <dd>La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins <code>sy</code>.</dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>INDEX_SIZE_ERR</code></dt> + <dd>Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins.</dd> + <dt><code>INVALID_STATE_ERR</code></dt> + <dd>L'image reçue n'en est pas une.</dd> + <dt><code>TYPE_MISMATCH_ERR</code></dt> + <dd>L'image reçue n'est pas supportée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_drawImage">Utiliser la méthode <code>drawImage</code></h3> + +<p>Ceci est un extrait de code utilisant la méthode <code>drawImage</code> :</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +<div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" + width="300" height="227"> +</div> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById("source"); + +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); +</pre> + +<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div style="display:none;"> + <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227"> +</div> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var image = document.getElementById('source'); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>format ImageBitmap</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>format ImageBitmap</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(42)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Notes_concernant_la_compatibilité">Notes concernant la compatibilité</h2> + +<ul> + <li>Un support pour l'inversion de l'image pour les valeurs négatives pour <code>sLargeur</code> et <code>sHauteur</code> a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}.</li> + <li>A partir de {{geckoRelease("5.0")}} <code>drawImage()</code> gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes.</li> + <li>Spécifier une image <code>null</code> ou <code>undefined</code> en appellant <code>drawImage()</code> correctement retournera une exception <code>TYPE_MISMATCH_ERR</code> à partir de {{geckoRelease("5.0")}}.</li> + <li>Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas.</li> + <li>Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans <a href="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> +</ul> + +<h2 id="Notes">Notes</h2> + +<ul> + <li>drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}}<strong> est supérieur à 1.</strong> (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime)</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html new file mode 100644 index 0000000000..61d8e1345d --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.html @@ -0,0 +1,134 @@ +--- +title: CanvasRenderingContext2D.ellipse() +slug: Web/API/CanvasRenderingContext2D/ellipse +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Experimental + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/ellipse +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.ellipse()</code></strong> de l'API Canvas 2D ajoute une ellipse au trajet, centrée en <em>(x, y),</em> les rayons <em>rayonX</em> et <em>rayonY</em> commençant à <em>angleDeDébut</em> et se terminant à <em>angleDeFin,</em> en allant dans le sens indiqué par <em>antiHoraire</em> (par défaut, horaire).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.ellipse(x, y, rayonX, rayonY, rotation, angleDébut, angleFin, antihoraire);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>La coordonnée sur l'axe des x du centre de l'ellipse.</dd> + <dt><code>y</code></dt> + <dd>La coordonnée sur l'axe des y du centre de l'ellipse.</dd> + <dt><code>rayon</code>X</dt> + <dd>Le rayon du grand axe de l'ellipse.</dd> + <dt><code>rayon</code>Y</dt> + <dd>Le rayon du petit axe de l'ellipse.</dd> + <dt><code>rotation</code></dt> + <dd>La rotation pour cette ellipse, exprimée en radians.</dd> + <dt><code>angleDébut</code></dt> + <dd>L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians.</dd> + <dt><code>angleFin</code></dt> + <dd>L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians.</dd> + <dt><code>antihoraire</code> {{optional_inline}}</dt> + <dd>Un {{jsxref("Boolean")}} optionnel qui, si <code>true</code>, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire.</dd> +</dl> + +<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> + +<p>Ceci est seulement un fragment de code simple dessinant une ellipse.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.beginPath(); +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); +ctx.stroke(); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) :</p> + +<div style="display: none;"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.ellipse")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.html b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html new file mode 100644 index 0000000000..f18e8e0d72 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.html @@ -0,0 +1,203 @@ +--- +title: CanvasRenderingContext2D.fill() +slug: Web/API/CanvasRenderingContext2D/fill +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/fill +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fill()</code></strong> de l'API Canvas 2D remplit le chemin courant ou donné avec la couleur de fond en cours, en utilisant la règle de remplissage extérieur/intérieur non nul ou la règle de remplissage pair/impair.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fill([fillRule]);</var> +void <var><em>ctx</em>.fill(path[, fillRule]);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>fillRule</code></dt> + <dd>L'algorithme utilisé pour déterminer si un point est à l'intérieur ou à l'extérieur du chemin.<br> + Valeurs possible: + <ul> + <li><code><strong>"nonzero</strong></code>": La <a href="http://en.wikipedia.org/wiki/Nonzero-rule">règle de remplissage extérieur/intérieur non nul</a>, qui est la règle par défaut.</li> + <li><code><strong>"evenodd"</strong></code>: La <a href="http://en.wikipedia.org/wiki/Even%E2%80%93odd_rule">règle de remplissage pair/impair</a>.</li> + </ul> + </dd> + <dt><code>path</code></dt> + <dd>Un chemin {{domxref("Path2D")}} à remplir.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_fill">Utiliser la méthode <code>fill</code></h3> + +<p>Ceci est un simple snippet de code qui utilise la méthode <code>fill</code> pour remplir un chemin.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>Éditez le code ci-dessous pour voir vos changements apportés au canvas en direct:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rect(10, 10, 100, 100); +ctx.fill();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Utiliser_l'option_fillRule">Utiliser l'option <code>fillRule</code></h3> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> </pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(96.50,50.00); +ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17); +ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50); +ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00); +ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50); +ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00); +ctx.closePath(); + +ctx.fillStyle = "lightblue"; +ctx.lineWidth = 2; +ctx.fill("nonzero"); +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> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.moveTo(96.50,50.00); +ctx.bezierCurveTo(96.50,62.84,0.22,99.82,50.74,47.17); +ctx.bezierCurveTo(100.18,0.58,62.84,96.50,50.00,96.50); +ctx.bezierCurveTo(24.32,96.50,3.50,75.68,3.50,50.00); +ctx.bezierCurveTo(3.50,24.32,24.32,3.50,50.00,3.50); +ctx.bezierCurveTo(75.68,3.50,96.50,24.32,96.50,50.00); +ctx.closePath(); + +ctx.fillStyle = "lightblue"; +ctx.lineWidth = 2; +ctx.fill("nonzero"); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{EmbedLiveSample('Playable_code_2', 700, 360)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fill")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html new file mode 100644 index 0000000000..2a5e36e2cb --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.html @@ -0,0 +1,128 @@ +--- +title: CanvasRenderingContext2D.fillRect() +slug: Web/API/CanvasRenderingContext2D/fillRect +tags: + - API + - Canvas + - CanvasRendering2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/fillRect +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillRect()</code></strong> de l'API 2D des Canvas dessine un rectangle plein aux coordonnées <em>(x, y)</em>, aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> et au style déterminé par l'attribut <code>fillStyle</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillRect(x, y, largeur, hauteur);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>L'ordonnée <em>x</em> des coordonnées du point de départ du rectangle.</dd> + <dt><code>y</code></dt> + <dd>L'abscisse <em>y</em> des coordonnées du point de départ du rectangle.</dd> + <dt><code><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></code></dt> + <dd>La largeur du rectangle.</dd> + <dt><code>hauteur</code></dt> + <dd>La hauteur de rectangle.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_fillRect">Utilisation de la méthode <code>fillRect</code></h3> + +<p>Ceci est juste un extrait de code qui utilise la méthode <code>fillRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100); + +// remplir la balise entièrement +// ctx.fillRect(0, 0, canvas.width, canvas.height); +</pre> + +<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = "green"; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fillRect")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html new file mode 100644 index 0000000000..3fab6ac65c --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.html @@ -0,0 +1,163 @@ +--- +title: CanvasRenderingContext2D.fillStyle +slug: Web/API/CanvasRenderingContext2D/fillStyle +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillStyle +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillStyle</code></strong> de l'API Canvas 2D spécifie la couleur ou style à utiliser à l'intérieur des formes. La valeur par défaut est <code>#000</code> (black).</p> + +<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.fillStyle = color; +</var><var><em>ctx</em>.fillStyle = gradient; +</var><var><em>ctx</em>.fillStyle = pattern;</var> +</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>color</code></dt> + <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> + <dt><code>gradient</code></dt> + <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> + <dt><code>pattern</code></dt> + <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> +</dl> + +<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> + +<p>Ceci est un simple snippet de code utilisant la propriété <code>fillStyle</code> pour définir une couleur différente.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); +</pre> + +<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas directement:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 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> +</div> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); +for (var i = 0; i < 6; i++){ + for (var j = 0; j < 6; j++){ + ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + + Math.floor(255 - 42.5 * j) + ',0)'; + ctx.fillRect(j * 25, i * 25, 25, 25); + } +} +</pre> + +<p>Le résultat devrait ressembler à ça:</p> + +<p>{{EmbedLiveSample("A_fillStyle_example_with_for_loops", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.fillStyle")}}</p> + +<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> + +<ul> + <li>Outre <code>ctx.fillStyle</code>, il existe dans les navigateurs basés sur WebKit et Blink une méthode non-standard et dépréciée, <code>ctx.setFillColor()</code>. + + <pre class="brush: js">setFillColor(color, optional alpha); +setFillColor(grayLevel, optional alpha); +setFillColor(r, g, b, a); +setFillColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface définissant cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html new file mode 100644 index 0000000000..666e230f59 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.html @@ -0,0 +1,180 @@ +--- +title: CanvasRenderingContext2D.fillText() +slug: Web/API/CanvasRenderingContext2D/fillText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/fillText +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.fillText()</code></strong> de l'API Canvas 2D écrit un texte donné à la position <em>(x, y)</em> donnée. Si le quatrième paramètre optionnel donnant une largeur maximum est fourni, le texte sera mis à l'échelle pour s'adapter à cette largeur.</p> + +<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour dessiner un texte mis en forme.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.fillText(texte, x, y [, largeurMax]);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>texte</code></dt> + <dd>Le texte à représenter en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et de {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>La valeur de la coordonnée sur l'axe des x du point de début du texte.</dd> + <dt><code>y</code></dt> + <dd>La valeur de la coordonnée sur l'axe des y du point de fin du texte.</dd> + <dt><code>largeurMax</code> {{optional_inline}}</dt> + <dd>La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_fillText">Utilisation de la méthode <code>fillText</code></h3> + +<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>fillText</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.fillText('Hello world', 50, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps réel dans le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.fillText("Hello world", 50, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeText()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.html b/files/fr/web/api/canvasrenderingcontext2d/font/index.html new file mode 100644 index 0000000000..8f3cba24fe --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.html @@ -0,0 +1,140 @@ +--- +title: CanvasRenderingContext2D.font +slug: Web/API/CanvasRenderingContext2D/font +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.font = value;</var> +</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>valeur</code></dt> + <dd>Une valeur {{domxref("DOMString")}} analysée comme une valeur de {{cssxref("font")}} CSS. La police par défaut est 10px sans-serif.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_propriété_font">Utilisation de la propriété <code>font</code></h3> + +<p>Ceci est seulement un fragment de code simple utilisant la propriéte font pour indiquer une taille de police et une famille de police différentes.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.strokeText('Hello world', 50, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = '48px serif'; +ctx.strokeText('Hello world', 50, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="Chargement_de_polices_avec_l'API_CSS_Font_Loading">Chargement de polices avec l'API CSS Font Loading</h3> + +<p>A l'aide de l'API {{domxref("FontFace")}}, vous pouvez explicitement charger des polices avant de les utiliser dans un canevas.</p> + +<pre class="brush: js">var f = new FontFace('test', 'url(x)'); + +f.load().then(function() { + // Prêt à utiliser la police dans un contexte de canevas +});</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.font")}}</p> + +<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> + +<ul> + <li>Dans les navigateurs basés sur Gecko, tels que Firefox, une propriété non standard et désapprouvée <code>ctx.mozTextStyle</code> est implémentée en plus de cette propriété. Ne l'utilisez pas.</li> +</ul> + +<h3 id="Notes_relatives_à_Quantum">Notes relatives à Quantum</h3> + +<ul> + <li>Un bug ({{bug(1374885)}}) a été corrigé avec Quantum et qui empêchait de récupérer la police d'un contexte lorsqu'une police système était utilisée. Cela a été corrigée avec <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a> qui a été publié avec Firefox 57.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html new file mode 100644 index 0000000000..719eb385dc --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.html @@ -0,0 +1,103 @@ +--- +title: CanvasRenderingContext2D.getImageData() +slug: Web/API/CanvasRenderingContext2D/getImageData +tags: + - API + - Canvas + - Canvas API + - CanvasRenderingContext2D + - Image + - ImageData + - Méthode + - Méthodes + - References + - getImageDate +translation_of: Web/API/CanvasRenderingContext2D/getImageData +--- +<div>{{APIRef}}</div> + +<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> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">ImageData <var><em>ctx</em>.getImageData(sx, sy, sw, sh);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>sx</code></dt> + <dd>La coordonnée x du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em> sera extrait.</dd> + <dt><code>sy</code></dt> + <dd>La coordonnée y du coin supérieur gauche du rectangle à partir duquel <em>ImageData</em><strong><em> </em></strong> sera extrait.</dd> + <dt><code>sw</code></dt> + <dd>La largeur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> + <dt><code>sh</code></dt> + <dd>La hauteur du rectangle à partir duquel <em>ImageData<strong> </strong></em>sera extrait.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas.</p> + +<h3 id="Erreurs_renvoyées">Erreurs renvoyées</h3> + +<dl> + <dt><code>IndexSizeError</code></dt> + <dd>Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); + +console.log(ctx.getImageData(50, 50, 100, 100)); +// ImageData { largeur: 100, hauteur: 100, données: Uint8ClampedArray[40000] } +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-getimagedata", "CanvasRenderingContext2D.getImageData")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.getImageData")}}</p> + +<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>{{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> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html new file mode 100644 index 0000000000..a0cb81d4c8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.html @@ -0,0 +1,178 @@ +--- +title: CanvasRenderingContext2D.globalAlpha +slug: Web/API/CanvasRenderingContext2D/globalAlpha +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/globalAlpha +--- +<div>{{APIRef}}</div> + +<div>La propriété <strong>CanvasRenderingContext2D.globalAlpha</strong> de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque).</div> + +<div> </div> + +<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var>ctx.globalAlpha = valeur;</var> +</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>valeur</code></dt> + <dd>Un nombre entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). La valeur par défaut est 1,0. Les valeurs hors de la plage, y compris {{jsxref ("Infinity")}} et {{jsxref ("NaN")}} ne seront pas définies et <code>globalAlpha</code> conservera sa valeur précédente.</dd> +</dl> + +<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> + +<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> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.globalAlpha = 0.5; + +ctx.fillStyle = "blue"; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = "red"; +ctx.fillRect(50, 50, 100, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> +</div> +<textarea id="code" class="playable-code" style="height:120px;"> +ctx.globalAlpha = 0.5; + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = 'red'; +ctx.fillRect(50, 50, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); +var zoneTexte = document.getElementById('code'); +var effacement = document.getElementById('effacement'); +var modifier = document.getElementById('modifier'); +var code = zoneTexte.value; + +function dessinerCanevas() { + ctx.clearRect(0, 0, canevas.width, canevas.height); + eval(zoneTexte.value); +} + +effacement.addEventListener('click', function() { + zoneT.value = code; + dessinerCanevas(); +}); + +modifier.addEventListener('click', function() { + zoneTexte.focus(); +}) + +zoneTexte.addEventListener('input', dessinerCanevas); +window.addEventListener('load', dessinerCanevas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 380) }}</p> + +<h3 id="A_globalAlpha_example" name="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> + +<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); + +// Dessiner l'arrière-plan +ctx.fillStyle = '#FD0'; +ctx.fillRect(0, 0, 75, 75); +ctx.fillStyle = '#6C0'; +ctx.fillRect(75, 0, 75, 75); +ctx.fillStyle = '#09F'; +ctx.fillRect(0, 75, 75, 75); +ctx.fillStyle = '#F30'; +ctx.fillRect(75, 75, 75, 75); +ctx.fillStyle = '#FFF'; + +// Définir la valeur de transparence +ctx.globalAlpha = 0.2; + +// Dessiner les cercles semi-transparents +for (i = 0; i < 7; i++){ + ctx.beginPath(); + ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true); + ctx.fill(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.globalAlpha")}}</p> + +<h2 id="Notes_spécifiques_à_Gecko">Notes spécifiques à Gecko</h2> + +<ul> + <li>À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées.</li> +</ul> + +<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> + +<ul> + <li>Dans les navigateurs WebKit et Blink, une méthode non standard et désapprouvée <code>ctx.setAlpha() </code>est implémentée en plus de cette propriété.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html new file mode 100644 index 0000000000..2aa8c851b3 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.html @@ -0,0 +1,97 @@ +--- +title: CanvasRenderingContext2D.globalCompositeOperation +slug: Web/API/CanvasRenderingContext2D/globalCompositeOperation +translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.globalCompositeOperation</code></strong> de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes.</p> + +<p>Voir aussi <a href="/fr/docs/Tutoriel_canvas/Composition">Composition et découpe</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>ctx</em>.globalCompositeOperation = <em>type</em>;</pre> + +<p><code>type</code> est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser.</p> + +<h3 id="Types">Types</h3> + +<p>{{EmbedLiveSample("Compositing_example", 750, 6900, "" ,"Web/API/Canvas_API/Tutorial/Compositing/Example")}}</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Changer_lopération_de_composition">Changer l'opération de composition</h3> + +<p>Cet exemple utilise la propriété <code>globalCompositeOperation</code> pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[4]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.globalCompositeOperation = 'xor'; + +ctx.fillStyle = 'blue'; +ctx.fillRect(10, 10, 100, 100); + +ctx.fillStyle = 'red'; +ctx.fillRect(50, 50, 100, 100); +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Changing_the_composite_operation', 700, 180) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Etat</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalcompositeoperation", "CanvasRenderingContext2D.globalCompositeOperation")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Compositing')}}</td> + <td>{{Spec2('Compositing')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">La table de compatibilité sur cette page est générée à partir de données structurées. Si vous souhaitez apporter votre contribution, veuillez consulter la page <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et nous envoyer une pull-request.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.globalCompositeOperation")}}</p> + +<h3 id="Remarques_concernant_WebKitBlink">Remarques concernant WebKit/Blink</h3> + +<ul> + <li>Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète <code>ctx.setCompositeOperation()</code> est implémentée à la place de cette propriété.</li> + <li>Le support de <code>"plus-darker"</code> et<code>"darker"</code> a été abandonné à partir de Chrome 48. Veuillez utiliser <code>"darken"</code> à la place.</li> +</ul> + +<h3 id="Remarques_concernant_Gecko">Remarques concernant Gecko</h3> + +<ul> + <li>Une version préliminaire de la spécification de Canvas définissait une valeur <code>"darker"</code>. Cependant, Firefox a abandonné le support de <code>"darker"</code> dans sa version 4 ({{bug(571532)}}). Voir aussi <a href="http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker">cet article de blog</a> qui suggère l'utilisation de <code>"difference"</code> pour parvenir à un effet similaire à <code>"darker"</code>.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette propriété : {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html new file mode 100644 index 0000000000..415300d3a8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html @@ -0,0 +1,136 @@ +--- +title: CanvasRenderingContext2D.imageSmoothingEnabled +slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +tags: + - API + - Canevas + - Canvas + - CanvasRenderingContext2D + - Experimental + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled +--- +<div>{{APIRef}} {{SeeCompatTable}}</div> + +<p>La propriété <code>CanvasRenderingContext2D.imageSmoothingEnabled</code> de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (<code>true</code>, par défaut) ou non (<code>false</code>). Lors de la récupération de la propriété <code>imageSmoothingEnabled</code>, la dernière valeur à laquelle elle a été définie est renvoyée.</p> + +<p>Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à <code>false</code> dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = valeur;</var></pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>valeur</code></dt> + <dd>Un {{jsxref("Boolean")}} indiquant de lisser les images ou non.</dd> +</dl> + +<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> + +<p>Ceci est juste un simple fragment de code utilisant la propriété <code>imageSmoothingEnabled</code> sur une image mise à l'échelle.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7-10]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +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); +}; +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en direct dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Code jouable</h6> + +<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> +</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> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.imageSmoothingEnabled")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{cssxref("image-rendering")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.html b/files/fr/web/api/canvasrenderingcontext2d/index.html new file mode 100644 index 0000000000..ead40576bd --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/index.html @@ -0,0 +1,434 @@ +--- +title: CanvasRenderingContext2D +slug: Web/API/CanvasRenderingContext2D +tags: + - API + - Canvas + - CanvasRenderingContext2D + - graphique +translation_of: Web/API/CanvasRenderingContext2D +--- +<p>{{APIRef}}</p> + +<p>L'interface <strong>CanvasRenderingContext2D</strong> est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}.</p> + +<p>Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément <code><canvas></code>, en fournissant "2d" comme argument :</p> + +<pre>var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> +var ctx = canevas.getContext('2d'); +</pre> + +<p><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> + +<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> + +<h2 id="Dessin_de_rectangles">Dessin de rectangles</h2> + +<p>Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> + <dd>Initialise tous les pixels dans le rectangle défini par le point de départ <em>(x, y)</em> et la taille <em>(largeur, hauteur)</em> à noir transparent, en effaçant tout contenu précédemment dessiné.</dd> + <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> + <dd>Dessine un rectangle rempli à la position <em>(x, y)</em> dont la taille est déterminée par <em>largeur</em> et <em>hauteur</em>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> + <dd>Peint un rectangle ayant un point de départ en <em>(x, y)</em>, une largeur <em>l</em> et une hauteur <em>h</em> sur le canevas, en utilisant le style de trait en cours.</dd> +</dl> + +<h2 id="Dessiner_du_texte">Dessiner du texte</h2> + +<p>Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> + <dd>Dessine (rempli) un texte donné à la position (x,y) donnée.</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> + <dd>Dessine (contour) un texte donné à la position (x, y) donnée.</dd> + <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> + <dd>Renvoie un objet {{domxref("TextMetrics")}}.</dd> +</dl> + +<h2 id="Styles_de_ligne">Styles de ligne</h2> + +<p>Les méthodes et propriétés suivantes controllent comment les lignes sont dessinées.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> + <dd>Largeur des lignes. Défaut <code>1.0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> + <dd>Type de finission pour la fin de la ligne. Valeurs possible: <code>butt</code> (défaut), <code>round</code>, <code>square</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> + <dd>Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: <code>round</code>, <code>bevel</code>, <code>miter</code> (défaut).</dd> + <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> + <dd>Le taux limite du miter. Sa valeur par défaut est <code>10</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> + <dd>Retourne le tableau de modèle du trait courant contenant un nombre pair de nombre positifs.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> + <dd>Définit le modèle du trait courant.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> + <dd>Specifies where to start a dash array on a line.</dd> +</dl> + +<h2 id="Styles_de_texte">Styles de texte</h2> + +<p>Les propriétés suivantes contrôlent la manière dont le texte est rendu à l’affichage.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> + <dd>Paramètre de fonte dont la valeur par défaut est <code>10px sans-serif</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> + <dd>Paramètre d’alignement horizontal. Ses valeurs possibles sont : <code>start</code> (par défaut), <code>end</code>, <code>left</code>, <code>right</code> et <code>center</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> + <dd>Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (par défaut), <code>ideographic</code>, <code>bottom</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> + <dd>Direction d’affichage. Ses valeurs possibles sont : <code>ltr, rtl</code>, <code>inherit</code> (par défaut).</dd> +</dl> + +<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> + +<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> + <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> + <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> + <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> +</dl> + +<h2 id="Gradients_and_patterns">Gradients and patterns</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> + <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> + <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> + <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> + <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> +</dl> + +<h2 id="Shadows">Shadows</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> + <dd>Specifies the blurring effect. Default <code>0</code></dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> + <dd>Color of the shadow. Default fully-transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> + <dd>Horizontal distance the shadow will be offset. Default 0.</dd> + <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> + <dd>Vertical distance the shadow will be offset. Default 0.</dd> +</dl> + +<h2 id="Paths">Paths</h2> + +<p>The following methods can be used to manipulate paths of objects.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> + <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> + <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> + <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> + <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> + <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> + <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> + <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code>before creating the Bézier curve.</dd> + <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> + <dd>Adds a quadratic Bézier curve to the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> + <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> + <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> + <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> + <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> + <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> +</dl> + +<h2 id="Drawing_paths">Drawing paths</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> + <dd>Fills the subpaths with the current fill style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> + <dd>Strokes the subpaths with the current stroke style.</dd> + <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> + <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> + <dd>Scrolls the current path or a given path into the view.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> + <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> + <dd>Reports whether or not the specified point is contained in the current path.</dd> + <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> + <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> +</dl> + +<h2 id="Transformations">Transformations</h2> + +<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> + <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> + <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> + <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> + <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> + <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> + <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> + <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> + <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> + <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> + <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> + <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> + <dd>Resets the current transform by the identity matrix.</dd> +</dl> + +<h2 id="Compositing">Compositing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> + <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code>(opaque).</dd> + <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> + <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> +</dl> + +<h2 id="Drawing_images">Drawing images</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> + <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> +</dl> + +<h2 id="Pixel_manipulation">Pixel manipulation</h2> + +<p>See also the {{domxref("ImageData")}} object.</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> + <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> + <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> + <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> + <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> + <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> +</dl> + +<h2 id="Image_smoothing">Image smoothing</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> + <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> +</dl> + +<h2 id="The_canvas_state">The canvas state</h2> + +<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> + <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> + <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> + <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> + <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> +</dl> + +<h2 id="Hit_regions">Hit regions</h2> + +<dl> + <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> + <dd>Adds a hit region to the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> + <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> + <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> + <dd>Removes all hit regions from the canvas.</dd> +</dl> + +<h2 id="Non-standard_APIs">Non-standard APIs</h2> + +<h3 id="Blink_and_WebKit">Blink and WebKit</h3> + +<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> + <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> + <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> + <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> +</dl> + +<h3 id="Blink_only">Blink only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> + <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> +</dl> + +<h3 id="WebKit_only">WebKit only</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> + <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> + <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> +</dl> + +<dl> +</dl> + +<h3 id="Gecko_only">Gecko only</h3> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> + <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> +</dl> + +<h4 id="Prefixed_APIs">Prefixed APIs</h4> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> + <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> + <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> + <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> + <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> + <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> + <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> + <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> +</dl> + +<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> + +<dl> + <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> + <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> + <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> +</dl> + +<h3 id="Internet_Explorer">Internet Explorer</h3> + +<dl> + <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> + <dd>The <a href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" 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> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("1")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatIE("9")}}</td> + <td>{{CompatOpera("9")}}</td> + <td>{{CompatSafari("2")}}</td> + </tr> + </tbody> +</table> + +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<ul> + <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLCanvasElement")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html new file mode 100644 index 0000000000..1693fc5d50 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.html @@ -0,0 +1,177 @@ +--- +title: CanvasRenderingContext2D.lineCap +slug: Web/API/CanvasRenderingContext2D/lineCap +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineCap +--- +<div>{{APIRef}}</div> + +<p>La propriété <strong>CanvasRenderingContext2D.lineCap</strong> de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : <code>butt</code>, <code>round</code> et <code>square</code>. Par défaut, cette propriété est définie comme <code>butt</code>.</p> + +<p>Voir aussi le chapitre <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a> dans le <a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial">Tutoriel canvas</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.lineCap = "butt"; +<var><em>ctx</em>.lineCap = "round"; +<var><em>ctx</em>.lineCap = "square";</var></var></var></pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>butt</code></dt> + <dd>Les extrémités de ligne sont coupées à angle droit.</dd> + <dt><code>round</code></dt> + <dd>Les extrémités de ligne sont arrondies.</dd> + <dt><code>square</code></dt> + <dd>Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié.</dd> +</dl> + +<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> + +<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> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[7]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(0, 0); +ctx.lineWidth = 15; +ctx.lineCap = 'round'; +ctx.lineTo(100, 100); +ctx.stroke(); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canvas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.moveTo(0, 0); +ctx.lineWidth = 15; +ctx.lineCap = 'round'; +ctx.lineTo(100, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); +var zoneTexte = document.getElementById('code'); +var effacer = document.getElementById('effacer'); +var modifier = document.getElementById('modifier'); +var code = zoneTexte.value; + +function dessinerCanevas() { + ctx.clearRect(0, 0, canevas.width, canevas.height); + eval(zoneTexte.value); +} + +effacer.addEventListener('click', function() { + zoneTexte.value = code; + dessinerCanevas(); +}); + +modifier.addEventListener('click', function() { + zoneTexte.focus(); +}) + +zoneTexte.addEventListener('input', dessinerCanevas); +window.addEventListener('load', dessinerCanevas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="A_lineCap_example" name="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> + +<p>La ligne à gauche utilise l'option par défaut <code>butt</code>. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option <code>round</code>. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option <code>square</code>. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié.</p> + +<pre class="brush: js">var ctx = document.getElementById('canevas').getContext('2d'); +var lineCap = ['butt','round','square']; + +// Dessiner les guides +ctx.strokeStyle = '#09f'; +ctx.beginPath(); +ctx.moveTo(10, 10); +ctx.lineTo(140, 10); +ctx.moveTo(10, 140); +ctx.lineTo(140, 140); +ctx.stroke(); + +// Dessiner les lignes +ctx.strokeStyle = 'black'; +for (var i = 0; i < lineCap.length; i++) { + ctx.lineWidth = 15; + ctx.lineCap = lineCap[i]; + ctx.beginPath(); + ctx.moveTo(25 + i * 50, 10); + ctx.lineTo(25 + i * 50, 140); + ctx.stroke(); +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canevas" width="150" height="150"></canvas></pre> +</div> + +<p>{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.lineCap")}}</p> +<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> + +<ul> + <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée <code>ctx.setLineCap()</code> est implémentée en plus de cette propriété.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineJoin")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html new file mode 100644 index 0000000000..ca4fbd4f4e --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.html @@ -0,0 +1,135 @@ +--- +title: CanvasRenderingContext2D.lineJoin +slug: Web/API/CanvasRenderingContext2D/lineJoin +tags: + - API + - Canvas + - Propriété + - arrondit + - coin + - stroke +translation_of: Web/API/CanvasRenderingContext2D/lineJoin +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineJoin</code></strong> de l'API Canvas 2D détermine la forme à utiliser pour joindre deux segments de ligne à leur intersection.</p> + +<p>Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}.</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><em>ctx</em>.lineJoin = "bevel" || "round" || "miter"; +</pre> + +<h3 id="Options">Options</h3> + +<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> + +<dl> + <dt><code>"round"</code> (rond)</dt> + <dd>Arrondit les coins d'une forme en remplissant un zone supplémentaire centré sur le point final commun des segments connectés. Le rayon de ces coins arrondis est égal à la largeur de la ligne .</dd> + <dt><code>"bevel"</code> (biseau)</dt> + <dd>Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés.</dd> + <dt><code>"miter"</code> (onglet)</dt> + <dd>Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Modifier_les_jointures_d'un_tracé">Modifier les jointures d'un tracé</h3> + +<p>Cet exemple applique des jointures arrondies au tracé.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight[5]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +ctx.lineWidth = 20; +ctx.lineJoin = 'round'; +ctx.beginPath(); +ctx.moveTo(20, 20); +ctx.lineTo(190, 100); +ctx.lineTo(280, 20); +ctx.lineTo(280, 150); +ctx.stroke(); +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Changing_the_joins_in_a_path', 700, 180) }}</p> + +<h3 id="Comparaison_des_jointures_de_lignes">Comparaison des jointures de lignes</h3> + +<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: js">var ctx = document.getElementById('canvas').getContext('2d'); +var lineJoin = ['round', 'bevel', 'miter']; +ctx.lineWidth = 10; + +for (let i = 0; i < lineJoin.length; i++) { + ctx.lineJoin = lineJoin[i]; + ctx.beginPath(); + ctx.moveTo(-5, 5 + i * 40); + ctx.lineTo(35, 45 + i * 40); + ctx.lineTo(75, 5 + i * 40); + ctx.lineTo(115, 45 + i * 40); + ctx.lineTo(155, 5 + i * 40); + ctx.stroke(); +} +</pre> + +<p>{{EmbedLiveSample("Comparison_of_line_joins", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linejoin", "CanvasRenderingContext2D.lineJoin")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_naviagateurs">Compatibilité des naviagateurs</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.lineJoin")}}</p> + +<h3 id="WebKitBlink-notes_particulières">WebKit/Blink-notes particulières</h3> + +<ul> + <li>Dans les navigateurs basés sur WebKit et Blink, une méthode <code>ctx.setLineJoin()</code> non-standard et obsolète est implémentée en plus de cette propriété.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface définissant cette propriété: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineCap")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineWidth")}}</li> + <li><a href="/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors">Ajout de styles et de couleurs</a></li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html new file mode 100644 index 0000000000..51359d72fd --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.html @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.lineTo() +slug: Web/API/CanvasRenderingContext2D/lineTo +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/lineTo +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.lineTo()</code></strong> de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées <code>x, y</code> spécifiées avec une ligne droite (sans tracer réellement le chemin).</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.lineTo(x, y);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>L'abscisse <em>x</em> du point d'arrivée.</dd> + <dt><code>y</code></dt> + <dd>L'ordonnée <em>y</em> du point d'arrivée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_lineTo">Utilisation de la méthode <code>lineTo</code></h3> + +<p>Ceci est un extrait de code utilisant la méthode <code>lineTo</code>. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[6]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(100, 100); +ctx.stroke(); +</pre> + +<p>Éditez le code suivant pour voir les changements en direct:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(100, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.lineTo")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.moveTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html new file mode 100644 index 0000000000..49895d86e8 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.html @@ -0,0 +1,125 @@ +--- +title: CanvasRenderingContext2D.measureText() +slug: Web/API/CanvasRenderingContext2D/measureText +tags: + - API + - Canevas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/measureText +--- +<div>{{APIRef}}</div> + +<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> + +<pre class="syntaxbox"><var><em>ctx</em></var>.measureText(texte);</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt>texte</dt> + <dd>Le texte à mesurer.</dd> +</dl> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Un objet {{domxref("TextMetrics")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Étant donné cet élément {{HTMLElement("canvas")}} :</p> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<p>vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant :</p> + +<pre class="brush: js">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +var texte = ctx.measureText('foo'); // objet TextMetrics +texte.width; // 16; +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE(9)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_Also" name="See_Also">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> + <li>{{domxref("TextMetrics")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html new file mode 100644 index 0000000000..f7890599d4 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.html @@ -0,0 +1,124 @@ +--- +title: CanvasRenderingContext2D.moveTo() +slug: Web/API/CanvasRenderingContext2D/moveTo +tags: + - API + - Canvas + - CanvasRenderingContext2D +translation_of: Web/API/CanvasRenderingContext2D/moveTo +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.moveTo()</code></strong> de l'API Canvas 2D déplace le point de départ d'un nouveau sous-chemin vers les coordonnées <code>(x, y)</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.moveTo(x, y);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>L'axe des x du point.</dd> + <dt><code>y</code></dt> + <dd>L'axe des y du point.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_moveTo">Utiliser la méthode <code>moveTo</code></h3> + +<p>Ceci est un simple snippet de code qui utilise la méthode <code>moveTo</code> pour déplacer le stylo à une position de départ pour dessiner une ligne.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.moveTo(50, 50); +ctx.lineTo(200, 50); +ctx.stroke(); +</pre> + +<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.beginPath(); +ctx.moveTo(50,50); +ctx.lineTo(200, 50); +ctx.stroke()</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.moveTo")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineTo()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html new file mode 100644 index 0000000000..4978bdd735 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.html @@ -0,0 +1,137 @@ +--- +title: CanvasRenderingContext2D.quadraticCurveTo() +slug: Web/API/CanvasRenderingContext2D/quadraticCurveTo +tags: + - API + - Bézier + - Canevas + - Canvas + - CanvasRenderingContext2D + - Courbe + - Courbe de Bézier + - Courbe quadratique + - Courbe quadratique de Bézier + - Méthode + - Quadratique + - Reference +translation_of: Web/API/CanvasRenderingContext2D/quadraticCurveTo +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.quadraticCurveTo()</code></strong> de l'API Canvas 2D ajoute une <a href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">courbe de Bézier</a> quadratique au sous-chemin courant. Elle requiert deux points: le premier est le point de contrôle et le second est le point d'arrivée. Le point de départ est le dernier point du chemin courant, qui peut être changé au moyen de la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} avant de créer la courbe quadratique de Bézier.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void contexte2D.quadraticCurveTo(<em>pointContrôleX</em>, <em>pointContrôleY</em>, <em>pointArrivéeX</em>, <em>pointArrivéeY</em>); +</pre> + +<h3 id="Paramètress">Paramètress</h3> + +<dl> + <dt><code>pointContrôleX</code></dt> + <dd>La coordonnée en x du point de contrôle.</dd> + <dt><code>pointContrôleY</code></dt> + <dd>La coordonnée en y du point de contrôle.</dd> + <dt><code>pointArrivéeX</code></dt> + <dd>La coordonnée en x du point d'arrivée.</dd> + <dt><code>pointArrivéeY</code></dt> + <dd>La coordonnée en y du point d'arrivée.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Comment_quadraticCurveTo_fonctionne">Comment quadraticCurveTo fonctionne</h3> + +<p>Cet exemple montre comment un courbe quadratique de Bézier est dessinée.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[7]">const canevas = document.getElementById("canvas"); +const contexte2D= canevas.getContext("2d"); + +// courbe quadratique de Bézier +contexte2D.beginPath(); +contexte2D.moveTo(50, 20); +contexte2D.quadraticCurveTo(230, 30, 50, 100); +contexte2D.stroke(); + +// Points de départ et d'arrivée +contexte2D.fillStyle = "blue"; +contexte2D.beginPath(); +contexte2D.arc(50, 20, 5, 0, 2 * Math.PI); // Point de départ +contexte2D.arc(50, 100, 5, 0, 2 * Math.PI); // Point d'arrivée +contexte2D.fill(); + +// Point de contrôle +contexte2D.fillStyle = 'red'; +contexte2D.beginPath(); +contexte2D.arc(230, 30, 5, 0, 2 * Math.PI); +contexte2D.fill(); +</pre> + +<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>{{EmbedLiveSample('How_quadraticCurveTo_works', 315, 165)}}</p> + +<h3 id="Une_courbe_quadratique_simple">Une courbe quadratique simple</h3> + +<p>Cet exemple dessine une simple courbe quadratique de Bézier au moyen de la méthode <code>quadraticCurveTo()</code>.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<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"); +const contexte2D = canevas.getContext("2d"); + +contexte2D.beginPath(); +contexte2D.moveTo(20, 110); +contexte2D.quadraticCurveTo(230, 150, 250, 20); +contexte2D.stroke(); +</pre> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('A_simple_quadratic_curve', 700, 180)}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.quadraticCurveTo")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface définissant cette méthode : {{domxref("CanvasRenderingContext2D")}}</li> + <li><a href="http://fr.wikipedia.org/wiki/Courbe_de_Bézier">L'article Wikipédia sur les courbes quadratiques de Bézier</a></li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.html b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html new file mode 100644 index 0000000000..f030ad7c92 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.html @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.rect() +slug: Web/API/CanvasRenderingContext2D/rect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode +translation_of: Web/API/CanvasRenderingContext2D/rect +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rect()</code></strong> de l'API Canvas 2D crée un chemin de rectangle à la position <em>(x, y)</em> et de dimensions <em>width</em> et <em>height</em>. Ces quatre points sont connectés par des lignes droites et le sous-chemin est directement fermé, vous pouvez donc utiliser <code>fill</code> ou <code>stroke</code> pour dessiner ce rectangle.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.rect(x, y, width, height);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>La coordonnée x pour le côté gauche du rectangle.</dd> + <dt><code>y</code></dt> + <dd>La coordonnée y pour le haut du rectangle.</dd> + <dt><code>width</code></dt> + <dd>La largeur du rectangle.</dd> + <dt><code>height</code></dt> + <dd>La hauteur du rectangle.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_la_méthode_rect">Utiliser la méthode <code>rect</code></h3> + +<p>Ceci est un simple bout de code qui utilise la méthode <code>rect</code> pour dessiner un chemin. Pour réellement dessiner ce chemin sur le canvas, vous devez utiliser la méthode {{domxref("CanvasRenderingContext2D.fill", "fill()")}} ou {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}. Voir également les méthodes {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} et {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect()")}}, qui peuvent le faire en une seule étape.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[3]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.fill(); +</pre> + +<p>Éditez le code ci-dessous pour voir vos mises à jour apportées au canvas directement:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rect(10, 10, 100, 100); +ctx.fill();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rect", "CanvasRenderingContext2D.rect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.rect")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette méthode, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fill()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.stroke()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html new file mode 100644 index 0000000000..94dabd0201 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.html @@ -0,0 +1,176 @@ +--- +title: CanvasRenderingContext2D.rotate() +slug: Web/API/CanvasRenderingContext2D/rotate +tags: + - API + - Cancas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/rotate +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.rotate()</code></strong><code> de l'API</code> Canvas 2D ajoute une rotation à la matrice de transformation. L'argument angle représente un angle de rotation horaire et il est exprimé en radians.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<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> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>angle</code></dt> + <dd>L'angle de rotation horaire en radians. Vous pouvez utiliser <code><em>degrés</em> * Math.PI / 180</code> si vous voulez faire la conversion à partir d'une valeur en degrés.</dd> +</dl> + +<p>Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_rotate">Utilisation de la méthode <code>rotate</code></h3> + +<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>rotate</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.rotate(45 * Math.PI / 180); +ctx.fillRect(70, 0, 100, 30); + +// réinitialise la matrice de transformation courante à la matrice identité +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rotate(45 * Math.PI / 180); +ctx.fillRect(70,0,100,30); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/save/index.html b/files/fr/web/api/canvasrenderingcontext2d/save/index.html new file mode 100644 index 0000000000..b019de39b6 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/save/index.html @@ -0,0 +1,91 @@ +--- +title: CanvasRenderingContext2D.save() +slug: Web/API/CanvasRenderingContext2D/save +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Restaurer + - Save +translation_of: Web/API/CanvasRenderingContext2D/save +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.save()</code></strong> de l'API Canvas 2D API enregistre l'état complet du canvas en plaçant l'état courant dans une stack.</p> + +<h3 id="Létat_du_dessin">L'état du dessin</h3> + +<p>L'état du dessin qui est sauvegardé dans une stack se compose de:</p> + +<ul> + <li>La matrice de transformation actuelle.</li> + <li>La région de détourage actuelle.</li> + <li>Le tableau pour les tracés en pointillés.</li> + <li>Les valeurs des attributs suivant: {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}.</li> +</ul> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <em>ctx</em>.save();</pre> + +<h2 id="Exemple">Exemple</h2> + +<h3 id="Enregistrer_létat_du_dessin">Enregistrer l'état du dessin</h3> + +<p>Cet exemple utilise la méthode <code>save()</code> pour enregistrer l'état par défaut et <code>restore()</code> pour le rétablir plus tard, on pourra ainsi dessiner un rectangle avec l'état de base après.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">const canvas = document.getElementById('canvas'); +const ctx = canvas.getContext('2d'); + +// On sauvegarde l'état par défaut +ctx.save(); + +ctx.fillStyle = 'green'; +ctx.fillRect(10, 10, 100, 100); + +// On restaure l'état par défaut +ctx.restore(); + +ctx.fillRect(150, 40, 100, 100); +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{ EmbedLiveSample('Saving_the_drawing_state', 700, 180) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-save", "CanvasRenderingContext2D.save")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.CanvasRenderingContext2D.save")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface définissant cette méthode: {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.restore()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.html b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html new file mode 100644 index 0000000000..91746be321 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.html @@ -0,0 +1,173 @@ +--- +title: CanvasRenderingContext2D.scale() +slug: Web/API/CanvasRenderingContext2D/scale +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/scale +--- +<div>{{APIRef}}</div> + +<p>La méhode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.scale()</code></strong> de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement.</p> + +<p>Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.scale(x, y);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Facteur d'échelle dans la direction horizontale.</dd> + <dt>y</dt> + <dd>Facteur d'échelle dans la direction verticale.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_scale">Utilisation de la méthode <code>scale</code></h3> + +<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>scale</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.scale(10, 3); +ctx.fillRect(10, 10, 10, 10); + +// remet la matrice de transformation courante à la matrice identité +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.scale(10, 3); +ctx.fillRect(10,10,10,10); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 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 style="display: none;"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.scale(-1, 1); +ctx.font = "48px serif"; +ctx.fillText("Hello world!", -320, 120); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateur">Compatibilité navigateur</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.scale")}}</p> +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html new file mode 100644 index 0000000000..99a57ca4c5 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -0,0 +1,165 @@ +--- +title: CanvasRenderingContext2D.setLineDash() +slug: Web/API/CanvasRenderingContext2D/setLineDash +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Lignes + - Modèle + - Méthodes + - Pointillés + - Reference + - patterns + - setLineDash +translation_of: Web/API/CanvasRenderingContext2D/setLineDash +--- +<div>{{APIRef}}</div> + +<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> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.setLineDash(segments);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>segments</code></dt> + <dd>Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, <code>[5, 15, 25]</code> est transformé en <code>[5, 15, 25, 5, 15, 25]</code>. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine.</dd> +</dl> + +<h3 id="Valeur_de_retour">Valeur de retour</h3> + +<p><code>undefined</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>C'est simplement un fragment de code qui utilise la méthode <code>setLineDash()</code> pour dessiner une ligne pointillée au dessus d'une ligne pleine.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.beginPath(); +ctx.setLineDash([5, 15]); +ctx.moveTo(0, 50); +ctx.lineTo(400, 50); +ctx.stroke(); + +ctx.beginPath(); +ctx.setLineDash([]); +ctx.moveTo(0, 150); +ctx.lineTo(400, 150); +ctx.stroke(); +</pre> + +<h3 id="Essayez_le">Essayez le</h3> + +<p>Editez le code ci-dessous et observez les changements se produire dans le canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code" style="height:150px"> +ctx.beginPath(); +ctx.setLineDash([5, 15]); +ctx.moveTo(0, 50); +ctx.lineTo(400, 50); +ctx.stroke(); + +ctx.beginPath(); +ctx.setLineDash([]); +ctx.moveTo(0, 150); +ctx.lineTo(400, 150); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 10, 410) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navivgateurs">Compatibilité des navivgateurs</h2> + + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.setLineDash")}}</p> + +<h2 id="Notes_spécifiques_pour_Gecko">Notes spécifiques pour Gecko</h2> + +<ul> + <li>Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée <code>mozDash</code> a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez <code>setLineDash()</code> à la place.</li> +</ul> + +<h2 id="Notes_spécifiques_pour_WebKit">Notes spécifiques pour WebKit</h2> + +<ul> + <li>Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée <code>webkitLineDash</code> est implémentée en plus de cette méthode. Utilisez <code>setLineDash()</code> à la place.</li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html new file mode 100644 index 0000000000..54a288091b --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.html @@ -0,0 +1,134 @@ +--- +title: CanvasRenderingContext2D.setTransform() +slug: Web/API/CanvasRenderingContext2D/setTransform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/setTransform +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setTransform()</code></strong> de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode.</p> + +<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée..</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.setTransform(a, b, c, d, e, f);</var> +</pre> + +<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>Échelle horizontale.</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>Inclinaison horizontale.</dd> + <dt><code>c (m21)</code></dt> + <dd>Inclinaison verticale.</dd> + <dt><code>d (m22)</code></dt> + <dd>Échelle verticale.</dd> + <dt><code>e (dx)</code></dt> + <dd>Déplacement horizontal.</dd> + <dt><code>f (dy)</code></dt> + <dd>Déplacement vertical.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_setTransform">Utilisation de la méthode <code>setTransform</code></h3> + +<p>Ceci est seulement un fragment de code simple qui utilise la méthode <code>setTransform</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.setTransform(1, 1, 0, 1, 0, 0); +ctx.fillRect(0, 0, 100, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.setTransform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_navigateurs">Compatibilité navigateurs</h2> + + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.setTransform")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.transform()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html new file mode 100644 index 0000000000..59f9bb5f95 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.html @@ -0,0 +1,112 @@ +--- +title: CanvasRenderingContext2D.stroke() +slug: Web/API/CanvasRenderingContext2D/stroke +translation_of: Web/API/CanvasRenderingContext2D/stroke +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.stroke()</code></strong> de l'API Canvas 2D dessine le chemin actuel ou donné avec le style de trait actuel utilisant la règle d'enroulement non nulle.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.stroke();</var> +void <var><em>ctx</em>.stroke(path);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>path</code></dt> + <dd>Un chemin {{domxref("Path2D")}} à dessiner.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_stroke">Utilisation de la méthode <code>stroke</code></h3> + +<p>Il s'agit d'un extrait de code simple utilisant la méthode <code>stroke</code> pour tracer un chemin.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +ctx.rect(10, 10, 100, 100); +ctx.stroke(); +</pre> + +<p>Editer le code en dessous et voir vos modifications mises à jour en direct dans le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.rect(10, 10, 100, 100); +ctx.stroke();</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_avec_les_navigateurs">Compatibilité avec les navigateurs</h2> + +<div class="hidden">Le tableau de compatiblité de cette page est généré à partir de données structurées. Si vous voulez contribuer à la récupération des données, s'il vous plaît regardez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une<em> pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.stroke")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui le définit, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html new file mode 100644 index 0000000000..e2ac6a0f97 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.html @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.strokeRect() +slug: Web/API/CanvasRenderingContext2D/strokeRect +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Référence(2) +translation_of: Web/API/CanvasRenderingContext2D/strokeRect +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.strokeRect()</code></strong> de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche <em>(x, y)</em> et aux dimensions déterminées par <em>largeur</em> et <em>hauteur</em> dans la balise canvas, et en utilisant l'actuel <code>strokeStyle</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeRect(x, y, largeur, hauteur);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>L'abcisse <em>x</em> des coordonnées du point de départ du rectangle.</dd> + <dt><code>y</code></dt> + <dd>L'ordonnée <em>y</em> des coordonnées du point de départ du rectangle.</dd> + <dt><font face="Consolas, Liberation Mono, Courier, monospace">largeur</font></dt> + <dd>La largeur du rectangle.</dd> + <dt><code>hauteur</code></dt> + <dd>La hauteur de rectangle.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_strokeRect">Utilisation de la méthode <code>strokeRect</code></h3> + +<p>Ceci est juste un extrait de code qui utilise la méthode <code>strokeRect</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); + +ctx.strokeStyle = "green"; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<p>Éditez le code suivant pour voir les changements en direct dans la balise canvas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.strokeStyle = "green"; +ctx.strokeRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.strokeRect")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>l'interface qui la définit, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</li> + <li>{{domxref("CanvasRenderingContext2D.clearRect()")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillRect()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html new file mode 100644 index 0000000000..cf27a65468 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.html @@ -0,0 +1,160 @@ +--- +title: CanvasRenderingContext2D.strokeStyle +slug: Web/API/CanvasRenderingContext2D/strokeStyle +translation_of: Web/API/CanvasRenderingContext2D/strokeStyle +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D.strokeStyle</strong></code> de l'API Canvas 2D spécifie la couleur ou le style à utiliser pour dessiner les lignes autour des formes. La valeur par défaut est <code>#000</code> (black).</p> + +<p>Voir également le chapitre <a href="/fr/docs/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs">Ajout de styles et de couleurs</a> dans le <a href="/fr/docs/Tutoriel_canvas">Tutoriel canvas</a>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.strokeStyle = color; +</var><var><em>ctx</em>.strokeStyle = gradient; +</var><var><em>ctx</em>.strokeStyle = pattern;</var> +</pre> + +<h3 id="Options">Options</h3> + +<dl> + <dt><code>color</code></dt> + <dd>Une {{domxref("DOMString")}} analysée comme valeur CSS {{cssxref("<color>")}}.</dd> + <dt><code>gradient</code></dt> + <dd>Un objet {{domxref("CanvasGradient")}} (un gradient linéaire ou radial).</dd> + <dt><code>pattern</code></dt> + <dd>Un objet {{domxref("CanvasPattern")}} (une image répétée).</dd> +</dl> + +<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> + +<p>Ceci est un simple snippet de code utilisant la propriété <code>strokeStyle</code> pour définir une couleur différente.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.strokeStyle = 'blue'; +ctx.strokeRect(10, 10, 100, 100); +</pre> + +<p>Éditez le code ci-dessous pour voir vos changements mettre à jour le canvas en direct:</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.strokeStyle = 'blue'; +ctx.strokeRect(10, 10, 100, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h3 id="A_strokeStyle_example" name="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> + +<pre class="brush: js">var ctx = document.getElementById('canvas').getContext('2d'); + +for (var i = 0; i < 6; i++) { + for (var j = 0; j < 6; j++) { + ctx.strokeStyle = 'rgb(0,' + Math.floor(255 - 42.5 * i) + ',' + + Math.floor(255 - 42.5 * j) + ')'; + ctx.beginPath(); + ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true); + ctx.stroke(); + } +} +</pre> + +<div class="hidden"> +<pre class="brush: html"><canvas id="canvas" width="150" height="150"></canvas></pre> +</div> + +<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> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.strokeStyle")}}</p> + +<h2 id="Notes_spécifiques_à_WebKitBlink">Notes spécifiques à WebKit/Blink</h2> + +<ul> + <li>Dans les navigateurs basés sur WebKit et Blink, une méthode non standard et dépréciée, <code>ctx.setStrokeColor()</code>, est implémentée en plus de cette propriété. + + <pre class="brush: js">setStrokeColor(color, optional alpha); +setStrokeColor(grayLevel, optional alpha); +setStrokeColor(r, g, b, a); +setStrokeColor(c, m, y, k, a); +</pre> + </li> +</ul> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface qui définit cette propriété, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html new file mode 100644 index 0000000000..379e409679 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.html @@ -0,0 +1,129 @@ +--- +title: CanvasRenderingContext2D.strokeText() +slug: Web/API/CanvasRenderingContext2D/strokeText +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/strokeText +--- +<div>{{APIRef}}</div> + +<p>La méthode <code><strong>CanvasRenderingContext2D.strokeText()</strong></code> de l'API Canvas 2D trace le texte fourni à la position donnée <em>(x, y)</em>. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur.</p> + +<p>Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.strokeText(texte, x, y [, largeurMax]);</var> +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>texte</code></dt> + <dd>Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}.</dd> +</dl> + +<dl> + <dt><code>x</code></dt> + <dd>La coordonnée sur l'axe des x du point de départ du texte.</dd> + <dt><code>y</code></dt> + <dd>La coordonnée sur l'axe des y du point de départ du texte.</dd> + <dt><code>largeurMax</code> {{optional_inline}}</dt> + <dd>La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_strokeText">Utilisation de la méthode <code>strokeText</code></h3> + +<p>Il ne s'agit que d'un extrait de code simple qui utilise la méthode <code>strokeText</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[5]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.strokeText('Hello world', 50, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas:</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = "48px serif"; +ctx.strokeText("Hello world", 50, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + + +<p>{{Compat("api.CanvasRenderingContext2D.strokeText")}}</p> +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.fillText()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html new file mode 100644 index 0000000000..33ef00d3ed --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.html @@ -0,0 +1,130 @@ +--- +title: CanvasRenderingContext2D.textAlign +slug: Web/API/CanvasRenderingContext2D/textAlign +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textAlign +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textAlign</code></strong> de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode CanvasRenderingContext2D.<strong>fillText</strong>. Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%*width.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textAlign = "left" || "right" || "center" || "start" || "end";</var> +</pre> + +<h3 id="Options">Options</h3> + +<p>Valeurs possibles :</p> + +<dl> + <dt>left</dt> + <dd>Le texte est aligné à gauche.</dd> + <dt>right</dt> + <dd>Le texte est aligné à droite.</dd> + <dt>center</dt> + <dd>Le texte est centré.</dd> + <dt>start</dt> + <dd>Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche).</dd> + <dt>end</dt> + <dd>Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche).</dd> +</dl> + +<p>La valeur pa défaut est <code>start</code>.</p> + +<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> + +<p>Ceci est seulement un fragment de code simple utilisant la propriété <code>textAlign pour indiquer un alignement de texte</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<p>Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = '48px serif'; +ctx.textAlign = 'left'; +ctx.strokeText('Hello world', 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.textAlign")}}</p> +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html new file mode 100644 index 0000000000..9c7f8e41ea --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.html @@ -0,0 +1,184 @@ +--- +title: CanvasRenderingContext2D.textBaseline +slug: Web/API/CanvasRenderingContext2D/textBaseline +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Propriété + - Reference +translation_of: Web/API/CanvasRenderingContext2D/textBaseline +--- +<div>{{APIRef}}</div> + +<p>La propriété <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.textBaseline</code></strong> de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox"><var><em>ctx</em>.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom";</var> +</pre> + +<h3 id="Options">Options</h3> + +<p>Valeurs possibles :</p> + +<dl> + <dt>top</dt> + <dd>La ligne de base du texte est le haut du cadratin.</dd> + <dt>hanging</dt> + <dd>La ligne de base du texte est la ligne de base supérieure.</dd> + <dt>middle</dt> + <dd>La ligne de base du texte est le milieu du cadratin.</dd> + <dt>alphabetic</dt> + <dd>La ligne de base du texte est la ligne de base normale alphabétique.</dd> + <dt>ideographic</dt> + <dd>La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique.</dd> + <dt>bottom</dt> + <dd>La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages.</dd> +</dl> + +<p>La valeur par défaut est <code>alphabetic</code>.</p> + +<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> + +<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> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canvas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); + +ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas :</p> + +<div class="hidden"> +<h6 id="Playable_code" name="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.font = '48px serif'; +ctx.textBaseline = 'hanging'; +ctx.strokeText('Hello world', 0, 100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById('canvas'); +var ctx = canvas.getContext('2d'); +var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var edit = document.getElementById('edit'); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener('click', function() { + textarea.focus(); +}) + +textarea.addEventListener('input', drawCanvas); +window.addEventListener('load', drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>{{ CompatIE(9) }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}.</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.html b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html new file mode 100644 index 0000000000..fa60151b13 --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.html @@ -0,0 +1,136 @@ +--- +title: CanvasRenderingContext2D.transform() +slug: Web/API/CanvasRenderingContext2D/transform +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/transform +--- +<div>{{APIRef}}</div> + +<p>La méthode <strong>CanvasRenderingContext2D.transform ()</strong> de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte.</p> + +<p>Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque <code>transform()</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">void <var><em>ctx</em>.transform(a, b, c, d, e, f);</var> +</pre> + +<p>La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math></p> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>a (m11)</code></dt> + <dd>Échelle horizontale.</dd> + <dt><em><code>b (m12)</code></em></dt> + <dd>Inclinaison horizontale.</dd> + <dt><code>c (m21)</code></dt> + <dd>Inclinaison verticale.</dd> + <dt><code>d (m22)</code></dt> + <dd>Échelle verticale.</dd> + <dt><code>e (dx)</code></dt> + <dd>Déplacement horizontal.</dd> + <dt><code>f (dy)</code></dt> + <dd>Déplacement vertical.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_transform">Utilisation de la méthode <code>transform</code></h3> + +<p>Ceci est seulement un fragment de code simple utilisant la méthode <code>transform</code>.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.transform(1, 1, 0, 1, 0, 0); +ctx.fillRect(0, 0, 100, 100); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct dans le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.transform(1,1,0,1,0,0); +ctx.fillRect(0,0,100,100);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + eval(textarea.value); + ctx.restore(); +} + +reset.addEventListener("click", function() { + textarea.value = code; + ctx.setTransform(1, 0, 0, 1, 0, 0); + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.transform")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasRenderingContext2D.setTransform()")}}</li> +</ul> diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.html b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html new file mode 100644 index 0000000000..6146a88b6c --- /dev/null +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.html @@ -0,0 +1,126 @@ +--- +title: CanvasRenderingContext2D.translate() +slug: Web/API/CanvasRenderingContext2D/translate +tags: + - API + - Canvas + - CanvasRenderingContext2D + - Méthode + - Reference +translation_of: Web/API/CanvasRenderingContext2D/translate +--- +<div>{{APIRef}}</div> + +<p>La méthode <strong>CanvasRenderingContext2D.translate()</strong> de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<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> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>x</code></dt> + <dd>Distance de déplacement dans le sens horizontal.</dd> + <dt>y</dt> + <dd>Distance de déplacement dans le sens vertical.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utilisation_de_la_méthode_translate">Utilisation de la méthode <code>translate</code></h3> + +<p>Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><canvas id="canevas"></canvas> +</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js; highlight:[4]">var canevas = document.getElementById('canevas'); +var ctx = canevas.getContext('2d'); + +ctx.translate(50, 50); +ctx.fillRect(0, 0, 100, 100); + +// Réinitialise la matrice de transformation en cours à la matrice identité +ctx.setTransform(1, 0, 0, 1, 0, 0); +</pre> + +<p>Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas :</p> + +<div style="display: none;"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> +<div class="playable-buttons"> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> +</div> +<textarea id="code" class="playable-code"> +ctx.translate(50, 50); +ctx.fillRect(0,0,100,100); +ctx.setTransform(1, 0, 0, 1, 0, 0);</textarea> +</pre> + +<pre class="brush: js">var canvas = document.getElementById("canvas"); +var ctx = canvas.getContext("2d"); +var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var edit = document.getElementById("edit"); +var code = textarea.value; + +function drawCanvas() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + eval(textarea.value); +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawCanvas(); +}); + +edit.addEventListener("click", function() { + textarea.focus(); +}) + +textarea.addEventListener("input", drawCanvas); +window.addEventListener("load", drawCanvas); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("api.CanvasRenderingContext2D.translate")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'interface la définissant, {{domxref("CanvasRenderingContext2D")}}</li> +</ul> |