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
---
 .../canvas_api/tutorial/transformations/index.html | 70 ++++++++++------------
 1 file changed, 31 insertions(+), 39 deletions(-)

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

diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.html b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
index 61443be765..eec783769b 100644
--- a/files/fr/web/api/canvas_api/tutorial/transformations/index.html
+++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.html
@@ -12,7 +12,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 ---
 
{{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_d'images", " Web/API/Canvas_API/Tutorial/Compositing ")}}

 
-
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.

+
Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.

 
 
Sauvegarde et restauration d'état

 
@@ -39,7 +39,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   ctx.fillRect(0, 0, 150, 150);   // Dessine un rectangle avec les réglages par défaut
@@ -60,11 +60,9 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(60, 60, 30, 30);   // Dessine un rectangle avec les réglages restaurés
 }

 
-
+
 
 
La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.

 
@@ -72,17 +70,19 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.

 
-
{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+
{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}

 
 
Déplacement

 
-
 La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.

+
La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.

 
 

  
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}

  
Déplace la toile et son origine sur la grille. x indique la distance horizontale du déplacement, et y indique à quelle distance déplacer la grille verticalement.

 

 
+ 
+
 
C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode restore que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.

 
 
Un exemple translate

@@ -91,7 +91,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Dans la fonction draw (), nous appelons la fonction fillRect () neuf fois en utilisant deux boucles for . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à fillRect () utilise les mêmes coordonnées à chaque fois, en s'appuyant sur translate () pour ajuster la position du dessin.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
   for (var i = 0; i < 3; i++) {
     for (var j = 0; j < 3; j++) {
@@ -104,23 +104,24 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   }
 }

 
-
+
 
-
{{EmbedLiveSample("Un_exemple_translate", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+
+
{{EmbedLiveSample("Un_exemple_translate", "160", "160", "translate.png")}}

 
 
Rotation

 
-
La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.

+
La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.

 
 

  
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}

  
Fait pivoter le canevas, dans le sens des aiguilles d'une montre autour de l'origine actuelle, par le nombre de radians de l'angle.

 

 
+
+
 
Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode translate ().

 
 
Un exemple rotate

@@ -128,10 +129,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().

 
 

-
Rappel : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

+
Note : Les angles sont en radians, pas en degrés. Pour convertir en degrés, nous utilisons : radians = (Math.PI/180)*degrees.

 

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // rectangles de gauche, rotation depuis l'origine du canevas
@@ -163,13 +164,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.

 
-
+
 
-
{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+
{{EmbedLiveSample("Un_exemple_rotate", "310", "210", "rotate.png")}}

 
 
Mise à l'échelle

 
@@ -188,7 +187,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Dans ce dernier exemple, nous allons dessiner des  formes avec différents facteurs d'échelle.

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   // dessine un rectangle simple, mais le met à l'échelle.
@@ -203,13 +202,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillText('MDN', -135, 120);
 }

 
-
+
 
-
{{EmbedLiveSample("Un_exemple_scale", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+
{{EmbedLiveSample("Un_exemple_scale", "160", "160", "scale.png")}}

 
 
Transformation

 
@@ -217,11 +214,8 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 

  
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}

- 
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]

-

-
-

- 
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.

+ 
Multiplie la matrice de transformation actuelle avec la matrice décrite par ses arguments. La matrice de transformation est décrite par : 
[acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+ 
Si l'un des arguments est infini, la matrice de transformation doit être marquée comme infinie, plutôt que d'utiliser la méthode qui lance une exception.

 

 
 
Les paramètres de cette fonction sont :

@@ -247,7 +241,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
 
 
Exemple pour transform et setTransform

 
-
function draw() {
+
function draw() {
   var ctx = document.getElementById('canvas').getContext('2d');
 
   var sin = Math.sin(Math.PI / 6);
@@ -266,12 +260,10 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Transformations
   ctx.fillRect(0, 50, 100, 100);
 }

 
-
+
 
-
{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+
{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}

 
 
{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}

-- 
cgit v1.2.3-54-g00ecf