From 500f444d23a7a758da229ebe6b9691cc5d4fe731 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Wed, 16 Mar 2022 17:52:18 +0100 Subject: Fix #4269 - Removes empty/special characters (#4270) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Remove ufeff * Remove u2064 * Remove u2062 * Replace u202f followed by : with  : * Replace u202f next to « or » with   and « or » * Replace u202f followed by ; with  ; * Replace u202f followed by ! with   * Replace u202f followed by ? with  ? * 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   * Remove u00ad * Replace u00a0 followed by : ! or ? with   and punctuation * Replace u00a0 surrounded « or » with   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 ;   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) --- .../tutorial/compositing/example/index.md | 396 ++++++++++----------- 1 file changed, 198 insertions(+), 198 deletions(-) (limited to 'files/fr/web/api/canvas_api/tutorial/compositing') 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"); -- cgit v1.2.3-54-g00ecf