From 79843297a1d97045c504575ab9a6a29b3af8ffae Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 5 Nov 2021 15:44:38 +0100 Subject: Fixes #2842 - Fixing EmbedLiveSample errors for fr docs (#2851) * Fixes #2842 for CSS pages * Fixes #2842 for Web API pages * Fixes #2842 for other sections * Fix EmbedLiveSample for moved CSS page * Fixes #2842 for conflicting / orphaned docs --- files/fr/web/api/canvas_api/index.md | 6 +--- .../tutorial/advanced_animations/index.md | 6 ++-- .../tutorial/applying_styles_and_colors/index.md | 34 +++++++++------------- .../api/canvas_api/tutorial/compositing/index.md | 26 +++++++---------- .../api/canvas_api/tutorial/drawing_text/index.md | 13 +++------ .../pixel_manipulation_with_canvas/index.md | 6 ++-- .../api/canvas_api/tutorial/using_images/index.md | 14 +++------ 7 files changed, 40 insertions(+), 65 deletions(-) (limited to 'files/fr/web/api/canvas_api') diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 3b26e6ff1f..0cef55c848 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -1,10 +1,6 @@ --- title: API canvas slug: Web/API/Canvas_API -tags: - - API - - Canvas - - Reference translation_of: Web/API/Canvas_API --- {{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}} @@ -76,7 +72,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('code_jouable', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Références diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index 7581b9eb2e..be0df6f74b 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -227,7 +227,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("deuxième_démo", "610", "310")}} +{{EmbedLiveSample("Deuxième_démo", "610", "310")}} ## Effet de traînée @@ -297,7 +297,7 @@ canvas.addEventListener("mouseout",function(e){ ball.draw(); ``` -{{EmbedLiveSample("troisième_démo", "610", "310")}} +{{EmbedLiveSample("Troisième_démo", "610", "310")}} ## Ajout d'un contrôle de souris @@ -376,7 +376,7 @@ ball.draw(); Déplacez la balle en utilisant votre souris et relâchez-la avec un click. -{{EmbedLiveSample("Ajout_d'un_contrôle_de_souris", "610", "310")}} +{{EmbedLiveSample("Ajout_d\'un_contrôle_de_souris", "610", "310")}} ## Casse-briques diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 9449c304d0..8165c90b46 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -1,12 +1,6 @@ --- title: Ajout de styles et de couleurs slug: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors -tags: - - Canvas - - Couleurs - - Formes géométriques - - Graphismes - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- @@ -65,7 +59,7 @@ draw(); Le résultat ressemble à ceci: -{{EmbedLiveSample("A_fillStyle_example", 160, 160, "canvas_fillstyle.png")}} +{{EmbedLiveSample("Un_exemple_fillStyle", 160, 160, "canvas_fillstyle.png")}} ### Un exemple `strokeStyle` @@ -96,7 +90,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "canvas_strokestyle.png")}} +{{EmbedLiveSample("Un_exemple_strokeStyle", "180", "180", "canvas_strokestyle.png")}} ## Transparence @@ -156,7 +150,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "canvas_globalalpha.png")}} +{{EmbedLiveSample("Un_exemple_globalAlpha", "180", "180", "canvas_globalalpha.png")}} ### Un exemple en utilisant `rgba()` @@ -194,7 +188,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "canvas_rgba.png")}} +{{EmbedLiveSample("Un_exemple_en_utilisant_rgba", "180", "180", "canvas_rgba.png")}} ## Le style des lignes @@ -246,7 +240,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineWidth_example", "180", "180", "canvas_linewidth.png")}} +{{EmbedLiveSample("Un_exemple_lineWidth", "180", "180", "canvas_linewidth.png")}} Pour l'obtention de lignes nettes, il faut comprendre comment les lignes sont tracées. Ci-dessous, la grille représente la grille de coordonnées. Les carrés sont des pixels réels de l'écran. Dans la première grille, un rectangle (2,1) à (5,5) est rempli. La zone entière couverte par les lignes (rouge clair) tombe sur les limites des pixels, de sorte que le rectangle rempli résultant aura des bords nets. @@ -314,7 +308,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineCap_example", "180", "180", "canvas_linecap.png")}} +{{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} ### Un exemple de `lineJoin` @@ -357,7 +351,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_lineJoin_example", "180", "180", "canvas_linejoin.png")}} +{{EmbedLiveSample("Un_exemple_de_lineJoin", "180", "180", "canvas_linejoin.png")}} ### Une démonstration de la propriété `miterLimit` @@ -432,7 +426,7 @@ document.getElementById('miterLimit').value = document.getElementById('canvas'). draw(); ``` -{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "canvas_miterlimit.png")}} +{{EmbedLiveSample("Une_démonstration_de_la_propriété_miterLimit", "400", "180", "canvas_miterlimit.png")}} ### Utilisation de lignes pointillées @@ -467,7 +461,7 @@ function march() { march(); ``` -{{EmbedLiveSample("Using_line_dashes", "120", "120", "marching-ants.png")}} +{{EmbedLiveSample("Utilisation_de_lignes_pointillées", "120", "120", "marching-ants.png")}} ## Dégradés @@ -540,7 +534,7 @@ Le premier est un dégradé d'arrière-plan. Comme vous pouvez le voir, nous avo Dans le second gradient, nous n'avons pas assigné la couleur de départ (à la position 0.0) puisqu'il n'était pas strictement nécessaire car il prendra automatiquement la valeur de la prochaine couleur. Par conséquent, l'attribution de la couleur noire à la position 0,5 fait automatiquement passer le dégradé, du début à l'arrêt, en noir. -{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "canvas_lineargradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createLinearGradient", "180", "180", "canvas_lineargradient.png")}} ### Un exemple de `createRadialGradient` @@ -595,7 +589,7 @@ Dans ce cas, nous avons légèrement décalé le point de départ du point final Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une couleur entièrement transparente. Si vous voulez une transition agréable de cette étape à la couleur précédente, les deux couleurs doivent être égales. Ce n'est pas très évident dans le code, car il utilise deux méthodes CSS différentes en démonstration, mais dans le premier dégradé `# 019F62 = rgba (1,159,98,1)`. -{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "canvas_radialgradient.png")}} +{{EmbedLiveSample("Un_exemple_de_createRadialGradient", "180", "180", "canvas_radialgradient.png")}} ## Modèles @@ -657,7 +651,7 @@ draw(); Le résultat ressemble à ceci : -{{EmbedLiveSample("A_createPattern_example", "180", "180", "canvas_createpattern.png")}} +{{EmbedLiveSample("Un_exemple_de_createPattern", "180", "180", "canvas_createpattern.png")}} ## Ombres @@ -707,7 +701,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "shadowed-string.png")}} +{{EmbedLiveSample("Un_exemple_de_texte_ombré", "180", "100", "shadowed-string.png")}} Nous allons regarder la propriété de la `font` _(police de caratères)_ et la méthode `fillText` dans le chapitre suivant sur le [dessin de texte](/fr/docs/Dessin_de_texte_avec_canvas). @@ -740,6 +734,6 @@ function draw() { draw(); ``` -{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "fill-rule.png")}} +{{EmbedLiveSample("Règles_de_remplissage_Canvas", "110", "110", "fill-rule.png")}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} 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 3e0bf39741..2ad36d77c9 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.md @@ -1,16 +1,12 @@ --- title: Composition et découpe slug: Web/API/Canvas_API/Tutorial/Compositing -tags: - - Canvas - - Composition - - dessin translation_of: Web/API/Canvas_API/Tutorial/Compositing original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} -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. +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. ## `globalCompositeOperation` @@ -19,9 +15,9 @@ Nous pouvons non seulement dessiner de nouvelles formes derrière des formes exi - {{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. -Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. +Reportez-vous aux [exemples de compositon](/fr/docs/Tutoriel_canvas/Composition/Example) pour le code des exemples suivants. -{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} +{{EmbedLiveSample("globalCompositeOperation", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}} ## Détourage @@ -29,18 +25,18 @@ Un détourage (_clipping path_ en anglais) est comme une forme de canvas standar ![](canvas_clipping_path.png) -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. +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. -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. +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. - {{domxref("CanvasRenderingContext2D.clip", "clip()")}} - : Transforme le chemin en cours de création en détourage effectif. -Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. +Il faut utiliser `clip()` plutot que `closePath()` pour fermer un chemin et enfaire un détourage. -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. +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. -### Un exemple de `clip` +### Un exemple de `clip` 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...). @@ -101,10 +97,10 @@ function drawStar(ctx, r) { draw(); ``` -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. +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. -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. +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. -{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}} +{{EmbedLiveSample("Un_exemple_de_clip", "180", "180", "canvas_clip.png")}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}} diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md index 8cb24960db..61065903eb 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_text/index.md @@ -1,11 +1,6 @@ --- title: Dessin de texte avec canvas slug: Web/API/Canvas_API/Tutorial/Drawing_text -tags: - - Canvas - - Graphismes - - HTML - - Tutoriels translation_of: Web/API/Canvas_API/Tutorial/Drawing_text original_slug: Web/API/Canvas_API/Tutoriel_canvas/Dessin_de_texte_avec_canvas --- @@ -42,7 +37,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_fillText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_fillText", 310, 110)}} ### Un exemple de strokeText @@ -64,7 +59,7 @@ function draw() { draw(); ``` -{{EmbedLiveSample("A_strokeText_example", 310, 110)}} +{{EmbedLiveSample("Un_exemple_de_strokeText", 310, 110)}} ## Style de texte @@ -104,7 +99,7 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -#### Playable code +#### Code jouable ```html hidden @@ -144,7 +139,7 @@ textarea.addEventListener('input', drawCanvas); window.addEventListener('load', drawCanvas); ``` -{{ EmbedLiveSample('Playable_code', 700, 360) }} +{{ EmbedLiveSample('Code_jouable', 700, 360) }} ## Mesures de texte avancées diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 45651bb30a..1339a2cb47 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -95,7 +95,7 @@ Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/ } canvas.addEventListener('mousemove', pick); -{{ EmbedLiveSample('A_color_picker', 610, 240) }} +{{ EmbedLiveSample('Une_pipette_à_couleur', 610, 240) }} ## Peinture des données pixel dans un contexte @@ -166,7 +166,7 @@ function dessiner(img) { } ``` -{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} +{{ EmbedLiveSample('Niveaux_de_gris_et_inversion_de_couleurs', 330, 270) }} ## Zoom et anticrénelage @@ -233,7 +233,7 @@ function draw(img) { } ``` -{{ EmbedLiveSample('exemple_de_zoom', 620, 490) }} +{{ EmbedLiveSample('Exemple_de_zoom', 620, 490) }} ## Sauvegarde des images diff --git a/files/fr/web/api/canvas_api/tutorial/using_images/index.md b/files/fr/web/api/canvas_api/tutorial/using_images/index.md index 358204912c..b562f3c8f0 100644 --- a/files/fr/web/api/canvas_api/tutorial/using_images/index.md +++ b/files/fr/web/api/canvas_api/tutorial/using_images/index.md @@ -1,12 +1,6 @@ --- title: Utilisation d'images slug: Web/API/Canvas_API/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial translation_of: Web/API/Canvas_API/Tutorial/Using_images original_slug: Web/API/Canvas_API/Tutoriel_canvas/Utilisation_d'images --- @@ -150,7 +144,7 @@ function draw() { Le graphique résultant ressemble à ceci : -{{EmbedLiveSample("example_a_simple_line_graph", 220, 160, "canvas_backdrop.png")}} +{{EmbedLiveSample("Exemple_un_graphique_linéaire_simple", 220, 160, "canvas_backdrop.png")}} ## Mise à l'échelle @@ -190,7 +184,7 @@ function draw() { Le canevas résultant ressemble à ceci : -{{EmbedLiveSample("example_tiling_an_image", 160, 160, "canvas_scale_image.png")}} +{{EmbedLiveSample("Exemple_mosaïque_à_partir_d\'une_image", 160, 160, "canvas_scale_image.png")}} ## Découpage @@ -237,7 +231,7 @@ function draw() { Nous avons pris une approche différente pour charger les images cette fois. Au lieu de les charger en créant de nouveaux objets [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), nous les avons incluses comme balises [``](/fr/docs/Web/HTML/Element/Img) directement dans notre source HTML et avons récupéré les images depuis ceux-ci. Les images sont masquées via la propriété CSS [`display`](/fr/docs/Web/CSS/display) qui vaut `none`. -{{EmbedLiveSample("example_framing_an_image", 160, 160, "canvas_drawimage2.jpg")}} +{{EmbedLiveSample("Exemple_encadrer_une_image", 160, 160, "canvas_drawimage2.jpg")}} Chaque [``](/fr/docs/Web/HTML/Element/Img) se voit attribuer un attribut `id`, ce qui facilite leur sélection en utilisant [`document.getElementById()`](/fr/docs/Web/API/Document/getElementById). Nous utilisons `drawImage()` pour découper le rhinocéros de la première image et le mettre à l'échelle sur le canevas, puis dessiner le cadre par-dessus en utilisant un deuxième appel `drawImage()`. @@ -323,7 +317,7 @@ function draw() { } ``` -{{EmbedLiveSample("art_gallery_example", 725, 400)}} +{{EmbedLiveSample("Exemple_d\'une_galerie_d'art", 725, 400)}} ## Contrôler la mise à l'échelle de l'image -- cgit v1.2.3-54-g00ecf