aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/canvas_api/tutorial/compositing
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2022-03-16 17:52:18 +0100
committerGitHub <noreply@github.com>2022-03-16 17:52:18 +0100
commit500f444d23a7a758da229ebe6b9691cc5d4fe731 (patch)
treeca277561f7f3c5f2c9c3e80a895ac32f30852238 /files/fr/web/api/canvas_api/tutorial/compositing
parentde831e4687986c3a60b9ced69ce9faefda8df4b9 (diff)
downloadtranslated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.gz
translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.tar.bz2
translated-content-500f444d23a7a758da229ebe6b9691cc5d4fe731.zip
Fix #4269 - Removes empty/special characters (#4270)
* Remove ufeff * Remove u2064 * Remove u2062 * Replace u202f followed by : with &nbsp;: * Replace u202f next to « or » with &nbsp; and « or » * Replace u202f followed by ; with &nbsp;; * Replace u202f followed by ! with &nbsp; * Replace u202f followed by ? with &nbsp;? * Replace remaining u202f with classical space * Replace u200b surrounded by space with classical space * Replace u200b surrounded by space with classical space - again (repeated) * Remove remaining u200b * Remove u200a * Replace u2009 with &nbsp; * Remove u00ad * Replace u00a0 followed by : ! or ? with &nbsp; and punctuation * Replace u00a0 surrounded « or » with &nbsp; and punctuation * Replace u00a0 followed by whitespaces * Replace u00a0 preceded by whitespaces * Replace u00a0 followed by a newline with a newline * Replace u00a0 followed by a newline with a newline - Take2 * Replace u00a0 followed by a ; &nbsp; and punctuation * Remove u00a0 followed by , * Remove u00a0 in indentation spaces with \n([ ]*)([\u00a0])([ ]*) * Manual replacement of ([\u00a0])([ ]+) * Replace remaining ([\u00a0]+) by a space * cleaning empty elements * remove ufe0f * Remove u00a0 and u202f after merging against updated main * remove double whitespace using (\w)( )(\w)
Diffstat (limited to 'files/fr/web/api/canvas_api/tutorial/compositing')
-rw-r--r--files/fr/web/api/canvas_api/tutorial/compositing/example/index.md396
1 files changed, 198 insertions, 198 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 e3343ba8a3..283e149ca1 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
@@ -25,11 +25,11 @@ Ce code configure les valeurs globales utilisées par le reste du programme.
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',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
+ 'destination-over','destination-in','destination-out','destination-atop',
+ 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
+ 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+ 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
+ ].reverse();
var gcoText = [
"C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.",
"La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.",
@@ -68,21 +68,21 @@ Quand la page se charge, le code suivant s'exécute pour configurer et exécuter
```js
window.onload = function() {
-    // lum en sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // redimensionne le canvas
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix()
-    colorSphere();
-    runComposite();
-    return;
+ // lum en sRGB
+ var lum = {
+ r: 0.33,
+ g: 0.33,
+ b: 0.33
+ };
+ // redimensionne le canvas
+ canvas1.width = width;
+ canvas1.height = height;
+ canvas2.width = width;
+ canvas2.height = height;
+ lightMix()
+ colorSphere();
+ runComposite();
+ return;
};
```
@@ -90,74 +90,74 @@ Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en
```js
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-  return canvas;
+ var canvas = document.createElement("canvas");
+ canvas.style.background = "url("+op_8x8.data+")";
+ canvas.style.border = "1px solid #000";
+ canvas.style.margin = "5px";
+ canvas.width = width/2;
+ canvas.height = height/2;
+ return canvas;
}
function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
+ var dl = document.createElement("dl");
+ document.body.appendChild(dl);
+ while(gco.length) {
+ var pop = gco.pop();
+ var dt = document.createElement("dt");
+ dt.textContent = pop;
+ dl.appendChild(dt);
+ var dd = document.createElement("dd");
+ var p = document.createElement("p");
+ p.textContent = gcoText.pop();
+ dd.appendChild(p);
-  var canvasToDrawOn = createCanvas();
-   var canvasToDrawFrom = createCanvas();
-   var canvasToDrawResult = createCanvas();
+ var canvasToDrawOn = createCanvas();
+ var canvasToDrawFrom = createCanvas();
+ var canvasToDrawResult = createCanvas();
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('existing content', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('new content', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
+ var ctx = canvasToDrawResult.getContext('2d');
+ ctx.clearRect(0, 0, width, height)
+ ctx.save();
+ ctx.drawImage(canvas1, 0, 0, width/2, height/2);
+ ctx.globalCompositeOperation = pop;
+ ctx.drawImage(canvas2, 0, 0, width/2, height/2);
+ ctx.globalCompositeOperation = "source-over";
+ ctx.fillStyle = "rgba(0,0,0,0.8)";
+ ctx.fillRect(0, height/2 - 20, width/2, 20);
+ ctx.fillStyle = "#FFF";
+ ctx.font = "14px arial";
+ ctx.fillText(pop, 5, height/2 - 5);
+ ctx.restore();
+
+ var ctx = c
+ ctx.clearRe
+ ctx.save();
+ ctx.drawImage(canvas1,
+ ctx.fillStyle =
+ ctx.fillRect(0,
+ ctx.fillStyle
+ ctx.font = "14
+ ctx.fillText('
+ ctx.restore
+
+ var ctx = c
+ ctx.clearRe
+ ctx.save();
+ ctx.drawImage(c
+ ctx.fillStyle =
+ ctx.fillRect(0,
+ ctx.fillStyle = "#
+ ctx.font = "14p
+ x.fillText('new c
+ x.restore();
+
+ dd.appendChil
+ dd.appendChild(canvasToDrawFrom);
+ dd.appendChild(canvasToDrawResult);
+
+ dl.appendChild(dd);
+ }
};
```
@@ -167,59 +167,59 @@ Notre programme repose sur un certain nombbre de fonctions utilitaires:
```js
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
+ var ctx = canvas2.getContext("2d");
+ ctx.save();
+ ctx.globalCompositeOperation = "lighter";
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(255,0,0,1)";
+ ctx.arc(100, 200, 100, Math.PI*2, 0, false);
+ ctx.fill()
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(0,0,255,1)";
+ ctx.arc(220, 200, 100, Math.PI*2, 0, false);
+ ctx.fill()
+ ctx.beginPath();
+ ctx.fillStyle = "rgba(0,255,0,1)";
+ ctx.arc(160, 100, 100, Math.PI*2, 0, false);
+ ctx.fill();
+ ctx.restore();
+ ctx.beginPath();
+ ctx.fillStyle = "#f00";
+ ctx.fillRect(0,0,30,30)
+ ctx.fill();
};
```
```js
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // per degree
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    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)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
+ var ctx = canvas1.getContext("2d");
+ var width = 360;
+ var halfWidth = width / 2;
+ var rotate = (1 / 360) * Math.PI * 2; // per degree
+ var offset = 0; // scrollbar offset
+ var oleft = -20;
+ var otop = -20;
+ 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)");
+ gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
+ gradient.addColorStop(1, "rgba(255,255,255,1)");
+ ctx.beginPath();
+ ctx.moveTo(oleft + halfWidth, otop);
+ ctx.lineTo(oleft + halfWidth, otop + halfWidth);
+ ctx.lineTo(oleft + halfWidth + 6, otop);
+ ctx.fillStyle = gradient;
+ ctx.fill();
+ ctx.translate(oleft + halfWidth, otop + halfWidth);
+ ctx.rotate(rotate);
+ ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
+ }
+ ctx.beginPath();
+ ctx.fillStyle = "#00f";
+ ctx.fillRect(15,15,30,30)
+ ctx.fill();
+ return ctx.canvas;
};
```
@@ -227,76 +227,76 @@ var colorSphere = function(element) {
// HSV (1978) = H: Hue / S: Saturation / V: Value
Color = {};
Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
+ var H = o.H / 360,
+ S = o.S / 100,
+ V = o.V / 100,
+ R, G, B;
+ var A, B, C, D;
+ if (S == 0) {
+ R = G = B = Math.round(V * 255);
+ se {
+ if (H >= 1
+ H = 6 * H;
+ D = H - Math.floor(H);
+ A = Math.round(255 * V * (1 - S));
+ B = Math.round(255 * V * (1 - (S * D)));
+ C = Math.round(255 * V *
+ V = Math.round(255 * V);
+ switch (Mat
+ case 0:
+ R = V;
+ G = C;
+ B = A;
+ bre
+ 1:
+ R = B;
+ G = V;
+ B = A;
+ bre
+ 2:
+ R = A;
+ G = V;
+ B = C;
+ bre
+ 3:
+ R = A;
+ G = B;
+ B = V;
+ bre
+ 4:
+ R = C;
+ G = A;
+ B = V;
+ bre
+ case 5:
+ R = V;
+ G = A;
+ B = B;
+ break;
+ }
+ }
+ return {
+ R: R,
+ G: G,
+ B: B
+ };
};
var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
+ var proto = document.createElement("canvas").getContext("2d");
+ proto.canvas.width = size * 2;
+ proto.canvas.height = size * 2;
+ proto.fillStyle = color1; // top-left
+ proto.fillRect(0, 0, size, size);
+ proto.fillStyle = color2; // top-right
+ proto.fillRect(size, 0, size, size);
+ proto.fillStyle = color2; // bottom-left
+ proto.fillRect(0, size, size, size);
+ proto.fillStyle = color1; // bottom-right
+ proto.fillRect(size, size, size, size);
+ var pattern = proto.createPattern(proto.canvas, "repeat");
+ pattern.data = proto.canvas.toDataURL();
+ return pattern;
};
var op_8x8 = createInterlace(8, "#FFF", "#eee");