From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 .../tutorial/compositing/example/index.html        | 12 +++++-----
 .../api/canvas_api/tutorial/compositing/index.html | 26 ++++++++++------------
 2 files changed, 18 insertions(+), 20 deletions(-)

(limited to 'files/fr/web/api/canvas_api/tutorial/compositing')

diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
index 0cde521d32..f2992ea69d 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.html
@@ -21,7 +21,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition/Example
 
 
Ce code configure les valeurs globales utilisées par le reste du programme.

 
-
var canvas1 = document.createElement("canvas");
+
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',
@@ -65,7 +65,7 @@ var height = 340;
 
 
Quand la page se charge, le code suivant s'exécute pour configurer et exécuter l'exemple:

 
-
window.onload = function() {
+
window.onload = function() {
     // lum en sRGB
     var lum = {
         r: 0.33,
@@ -86,7 +86,7 @@ var height = 340;
 
 
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.

 
-
function createCanvas() {
+
function createCanvas() {
     var canvas = document.createElement("canvas");
     canvas.style.background = "url("+op_8x8.data+")";
     canvas.style.border = "1px solid #000";
@@ -162,7 +162,7 @@ function runComposite() {
 
 
Notre programme repose sur un certain nombbre de fonctions utilitaires:

 
-
var lightMix = function() {
+
var lightMix = function() {
     var ctx = canvas2.getContext("2d");
     ctx.save();
     ctx.globalCompositeOperation = "lighter";
@@ -186,7 +186,7 @@ function runComposite() {
 };
 

 
-
var colorSphere = function(element) {
+
var colorSphere = function(element) {
     var ctx = canvas1.getContext("2d");
     var width = 360;
     var halfWidth = width / 2;
@@ -218,7 +218,7 @@ function runComposite() {
 };
 

 
-
// HSV (1978) = H: Hue / S: Saturation / V: Value
+
// HSV (1978) = H: Hue / S: Saturation / V: Value
 Color = {};
 Color.HSV_RGB = function (o) {
     var H = o.H / 360,
diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/index.html b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
index 8cde4179fa..0ce19656af 100644
--- a/files/fr/web/api/canvas_api/tutorial/compositing/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/compositing/index.html
@@ -10,11 +10,9 @@ 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, 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

+
globalCompositeOperation

 
 
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.

 
@@ -27,13 +25,15 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 
 
{{EmbedLiveSample("Exemple_de_composition", 750, 6750, "" ,"/Tutoriel_canvas/Composition/Example")}}

 
-
Détourage

+
Détourage

 
-
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.

+
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.

+
+
 
 
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", 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", 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()")}}

@@ -42,13 +42,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Composition
 
 
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...).

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   ctx.fillRect(0, 0, 150, 150);
   ctx.translate(75, 75);
@@ -96,16 +96,14 @@ function drawStar(ctx, r) {
 }
 

 
-
+
 
 
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.

 
-
{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

+
{{EmbedLiveSample("A_clip_example", "180", "180", "canvas_clip.png")}}

 
 
{{PreviousNext("Web/API/Canvas_API/Tutorial/Transformations", "Web/API/Canvas_API/Tutorial/Basic_animations")}}

-- 
cgit v1.2.3-54-g00ecf