diff options
author | julieng <julien.gattelier@gmail.com> | 2021-10-02 17:20:24 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-02 17:30:20 +0200 |
commit | 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde (patch) | |
tree | 30a56efd3eff3a01bd1611e1840fdbbfacf544a4 /files/fr/web/api/canvas_api/tutorial/compositing | |
parent | c05efa8d7ae464235cf83d7c0956e42dc6974103 (diff) | |
download | translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.gz translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.tar.bz2 translated-content-1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde.zip |
convert content to md
Diffstat (limited to 'files/fr/web/api/canvas_api/tutorial/compositing')
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/compositing/example/index.md | 55 | ||||
-rw-r--r-- | files/fr/web/api/canvas_api/tutorial/compositing/index.md | 67 |
2 files changed, 65 insertions, 57 deletions
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index f2992ea69d..e3343ba8a3 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -11,17 +11,18 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example --- -<div>{{CanvasSidebar}}</div> +{{CanvasSidebar}} -<p>Cet exemple illustre un certain nombre d'<a href="/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation">opérations de composition</a>. Le résultat donne ceci:</p> +Cet exemple illustre un certain nombre d'[opérations de composition](/fr/docs/Web/API/CanvasRenderingContext2D.globalCompositeOperation). Le résultat donne ceci: -<p>{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}}</p> +{{EmbedLiveSample("Exemple_de_composition", "100%", 7250)}} -<h2 id="Exemple_de_composition">Exemple de composition</h2> +## Exemple de composition -<p>Ce code configure les valeurs globales utilisées par le reste du programme.</p> +Ce code configure les valeurs globales utilisées par le reste du programme. -<pre class="brush: js">var canvas1 = document.createElement("canvas"); +```js +var canvas1 = document.createElement("canvas"); var canvas2 = document.createElement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', @@ -59,13 +60,14 @@ var gcoText = [ ].reverse(); var width = 320; var height = 340; -</pre> +``` -<h3 id="Programme_principal">Programme principal</h3> +### Programme principal -<p>Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:</p> +Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple: -<pre class="brush: js">window.onload = function() { +```js +window.onload = function() { // lum en sRGB var lum = { r: 0.33, @@ -82,11 +84,12 @@ var height = 340; runComposite(); return; }; -</pre> +``` -<p>Et dans le code suivant, <code>runComposite()</code> gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles.</p> +Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en s'appuyant sur un certain nombre de fonctions utilitaires pour faire les parties difficiles. -<pre class="brush: js">function createCanvas() { +```js +function createCanvas() { var canvas = document.createElement("canvas"); canvas.style.background = "url("+op_8x8.data+")"; canvas.style.border = "1px solid #000"; @@ -156,13 +159,14 @@ function runComposite() { dl.appendChild(dd); } }; -</pre> +``` -<h3 id="Fonctions_utilitaires">Fonctions utilitaires</h3> +### Fonctions utilitaires -<p>Notre programme repose sur un certain nombbre de fonctions utilitaires:</p> +Notre programme repose sur un certain nombbre de fonctions utilitaires: -<pre class="brush: js">var lightMix = function() { +```js +var lightMix = function() { var ctx = canvas2.getContext("2d"); ctx.save(); ctx.globalCompositeOperation = "lighter"; @@ -184,9 +188,10 @@ function runComposite() { ctx.fillRect(0,0,30,30) ctx.fill(); }; -</pre> +``` -<pre class="brush: js">var colorSphere = function(element) { +```js +var colorSphere = function(element) { var ctx = canvas1.getContext("2d"); var width = 360; var halfWidth = width / 2; @@ -194,7 +199,7 @@ function runComposite() { var offset = 0; // scrollbar offset var oleft = -20; var otop = -20; - for (var n = 0; n <= 359; n ++) { + for (var n = 0; n <= 359; n ++) { var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); gradient.addColorStop(0, "rgba(0,0,0,0)"); @@ -216,9 +221,10 @@ function runComposite() { ctx.fill(); return ctx.canvas; }; -</pre> +``` -<pre class="brush: js">// HSV (1978) = H: Hue / S: Saturation / V: Value +```js +// HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { var H = o.H / 360, @@ -229,7 +235,7 @@ Color.HSV_RGB = function (o) { if (S == 0) { R = G = B = Math.round(V * 255); } else { - if (H >= 1) H = 0; + if (H >= 1) H = 0; H = 6 * H; D = H - Math.floor(H); A = Math.round(255 * V * (1 - S)); @@ -293,4 +299,5 @@ var createInterlace = function (size, color1, color2) { return pattern; }; -var op_8x8 = createInterlace(8, "#FFF", "#eee");</pre> +var op_8x8 = createInterlace(8, "#FFF", "#eee"); +``` diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/index.md index 0ce19656af..3e0bf39741 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -8,47 +8,44 @@ tags: translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- -<div>{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</div> +{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -<p>Dans tous nos <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations">exemples précédents</a>, les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété <code>globalCompositeOperation</code>. En complément, la propriété <code>clip</code> nous permet de cacher les parties des formes que nous ne désirons pas.</p> +Dans tous nos [exemples précédents](/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations), les formes étaient toutes dessinées les unes au dessus des autres. C'est plus que suffisant pour la plupart des situations, mais cela limite l'ordre dans lequel les formes composées sont construites. Nous pouvons cependant changer ce comportement en définissant la propriété `globalCompositeOperation`. En complément, la propriété `clip` nous permet de cacher les parties des formes que nous ne désirons pas. -<h2 id="globalCompositeOperation"><code>globalCompositeOperation</code></h2> +## `globalCompositeOperation` -<p>Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage.</p> +Nous pouvons non seulement dessiner de nouvelles formes derrière des formes existantes mais nous pouvons aussi les utiliser pour masquer certaines zones, supprimer des sections du canvas (ce n'est pas limité aux rectangles comme pour la méthode {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}) et davantage. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}}</dt> - <dd>Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation = type")}} + - : Cela configure le type d'opération de composition à appliquer lorsqu'on dessine de nouvelles formes, où le type correspond à une string qui fait référence à une des douze opérations de composition possibles. -<p>Reportez-vous aux <a href="/fr/docs/Tutoriel_canvas/Composition/Example">exemples de compositon</a> pour le code des exemples suivants.</p> +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -<p>{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}</p> +{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} -<h2 id="Clipping_paths">Détourage</h2> +## Détourage -<p>Un détourage (<em>clipping path</em> en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas.</p> +Un détourage (_clipping path_ en anglais) est comme une forme de canvas standard, à la différence près qu'elle sert à masquer certaines parties du canvas. Voyez l'image de droite, la forme rouge (en étoile) est un détourage du canvas. Tout ce qui est en dehors du chemin n'est pas dessiné sur le canvas. -<img alt="" src="canvas_clipping_path.png"> + -<p>Si nous comparons le détourage à la propriété <code>globalCompositeOperation</code> vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec <code>source-in</code> et <code>source-atop</code>. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte.</p> +Si nous comparons le détourage à la propriété `globalCompositeOperation` vue précédemment, nous voyons deux modes de composition qui ont plus ou moins les mémes effets qu'avec `source-in` et `source-atop`. La différence la plus significative entre les deux est que le détourage n'est jamais dessiné sur le canvas à proprement parler et il n'est jamais affecté par l'ajout de nouvelles formes. Ça le rend idéal pour dessiner plusieurs formes dans une zone restreinte. -<p>Dans le chapitre "<a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes">dessiner des formes avec le canevas</a>", nous n'avions mentionné que les méthodes <code>stroke()</code> et <code>fill()</code>, mais il y en a une troisième: <code>clip()</code> — elle permet de faire des détourages.</p> +Dans le chapitre "[dessiner des formes avec le canevas](/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)", nous n'avions mentionné que les méthodes `stroke()` et `fill()`, mais il y en a une troisième: `clip()` — elle permet de faire des détourages. -<dl> - <dt>{{domxref("CanvasRenderingContext2D.clip", "clip()")}}</dt> - <dd>Transforme le chemin en cours de création en détourage effectif.</dd> -</dl> +- {{domxref("CanvasRenderingContext2D.clip", "clip()")}} + - : Transforme le chemin en cours de création en détourage effectif. -<p>Il faut utiliser <code>clip()</code> plutot que <code>closePath()</code> pour fermer un chemin et enfaire un détourage.</p> +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -<p>Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente.</p> +Par défault, l'élément {{HTMLElement("canvas")}} possède un détourage aux mêmes dimensions que le canvas lui-même. Donc, par défaut aucune découpe n'est apparente. -<h3 id="A_clip_example">Un exemple de <code>clip</code></h3> +### Un exemple de `clip` -<p>Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...).</p> +Dans cet exemple, nous allons utiliser un détourage circulaire pour restreindre le dessin d'un essemble d'étoiles aléatoires à une zone particulière (et circulaire...). -<pre class="brush: js">function draw() { +```js +function draw() { var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 150, 150); ctx.translate(75, 75); @@ -67,7 +64,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition ctx.fillRect(-75, -75, 150, 150); // draw stars - for (var j = 1; j < 50; j++) { + for (var j = 1; j < 50; j++) { ctx.save(); ctx.fillStyle = '#fff'; ctx.translate(75 - Math.floor(Math.random() * 150), @@ -82,7 +79,7 @@ function drawStar(ctx, r) { ctx.save(); ctx.beginPath(); ctx.moveTo(r, 0); - for (var i = 0; i < 9; i++) { + for (var i = 0; i < 9; i++) { ctx.rotate(Math.PI / 5); if (i % 2 === 0) { ctx.lineTo((r / 0.525731) * 0.200811, 0); @@ -94,16 +91,20 @@ function drawStar(ctx, r) { ctx.fill(); ctx.restore(); } -</pre> +``` -<pre class="brush: html hidden"><canvas id="canvas" width="150" height="150"></canvas></pre> +```html hidden +<canvas id="canvas" width="150" height="150"></canvas> +``` -<pre class="brush: js hidden">draw();</pre> +```js hidden +draw(); +``` -<p>Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à <code>clip()</code>. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable.</p> +Dans les premières lignes de code, nous dessinons un rectangle noir ayant la même taille que le canvas comme toile de fond puis nous déplaçons l'origine au centre de l'image. Ensuite, nous créons le détourage circulaire en dessinant un arc (complet) et en faisant appelle à `clip()`. Les détourages font aussi partie de l'état de sauvegarde des canvas. Si on voulait garder le détourage d'origine, on pourrait par exemple sauvegarder l'état du canvas au préalable. -<p>Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction <code>drawStar()</code>. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage.</p> +Tout ce qui sera dessiné après la création du détourage n'apparaîtra qu'à l'intérieur de ce chemin. Vous pouvez voir ça clairement avec le dégradé linéaire qui est dessiné après. Ensuite, un ensemble de 50 étoiles aléatoires est dessiné, en utilisant la fonction `drawStar()`. Nous pouvons voir, une fois de plus, que les éléments (ici les étoiles) n'apparaissent qu'à l'intérieur du détourage. -<p>{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}</p> +{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} -<p>{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}</p> +{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} |