diff options
Diffstat (limited to 'files/fr/web/api/canvas_api/tutorial')
4 files changed, 14 insertions, 15 deletions
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 8165c90b46..31cf501014 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 @@ -99,7 +99,7 @@ En plus de dessiner des formes opaques sur la toile, nous pouvons également des - {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}} - : Applique la valeur de transparence spécifiée à toutes les formes futures tracées sur le Canvas. La valeur doit être comprise entre 0.0 (complètement transparent) à 1.0 (complètement opaque). Cette valeur est de 1,0 (complètement opaque) par défaut. -La propriété` globalAlpha` peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs. +La propriété `globalAlpha` peut être utile si vous voulez dessiner un grand nombre de formes sur la toile avec la même transparence, mais sinon, il est généralement plus utile de définir la transparence sur les formes individuelles lors de la définition de leurs couleurs. Parce que `strokeStyle` et `fillStyle` acceptent les valeurs de couleur rvba CSS, nous pouvons utiliser la notation suivante pour attribuer une couleur transparente. @@ -262,11 +262,11 @@ Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolut La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. -- `butt `_(bout)_ +- `butt` _(bout)_ - : L'extrémité des lignes est en angle droit. -- `round `_(rond)_ +- `round` _(rond)_ - : Les extrémités sont arrondies. -- `square `_(carré)_ +- `square` _(carré)_ - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. @@ -316,14 +316,14 @@ La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou c Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. -- `round `_(rond)_ +- `round` _(rond)_ - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. -- `bevel `_(biseau)_ +- `bevel` _(biseau)_ - : Ajoute un triangle à l'extrémité commune des segments connectés. -- `miter `_(onglet)_ +- `miter` _(onglet)_ - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. -L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété` lineJoin` ; la sortie est montrée ci-dessus. +L'exemple ci-dessous dessine trois chemins différents, démontrant chacun de ces trois paramètres de propriété `lineJoin` ; la sortie est montrée ci-dessus. ```js function draw() { diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index 99f0eb42d4..a38f95eadd 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -496,8 +496,7 @@ Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. ## Objets Path2D -Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet {{domxref("Path2D")}}, disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instrucions de dessin. Vous pourrez alors rejouer vos trajets rapidement. -Voyons comment nous pouvons construire un objet `Path2D `: +Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet [`Path2D`](/fr/docs/Web/API/Path2D), disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instructions de dessin. Vous pourrez alors rejouer vos trajets rapidement. Voyons comment nous pouvons construire un objet `Path2D` : - {{domxref("Path2D.Path2D", "Path2D()")}} - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). 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 1339a2cb47..7c6fadf160 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 @@ -37,7 +37,7 @@ var nbOctets = imageData.data.length; ## Création d'un objet `ImageData` -Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode `createImageData() `: +Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode [`createImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/createImageData). Il existe deux versions de la méthode `createImageData()` : ```js var monImageData = ctx.createImageData(largeur, hauteur); @@ -67,7 +67,7 @@ Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilis ### Une pipette à couleur -Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData)pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par `layerX` et `layerY`, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que [getImageData()](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le `<div>` pour afficher la couleur. +Dans cet exemple, nous utilisons la méthode [`getImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par `layerX` et `layerY`, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que [`getImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le `<div>` pour afficher la couleur. ```html hidden <canvas id="canvas" width="300" height="227" style="float:left"></canvas> @@ -99,7 +99,7 @@ Dans cet exemple, nous utilisons la méthode [getImageData() ](/fr/docs/Web/API/ ## Peinture des données pixel dans un contexte -Vous pouvez utiliser la méthode [putImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/putImageData)pour peindre les données pixel dans un contexte : +Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/putImageData) pour peindre les données pixel dans un contexte : ```js ctx.putImageData(monImageData, dx, dy); diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md index eb0ae18226..490e52c4fe 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -23,7 +23,7 @@ Avant d'étudier les méthodes de transformations, examinons deux autres méthod - {{domxref("CanvasRenderingContext2D.restore", "restore()")}} - : Restore le plus récent état sauvegardé du canevas. -Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode `save() `ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de : +Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode `save()` ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de : - les transformations qui ont été appliquées (exemples : déplacement, rotation, mise à l'échelle). - Les valeurs actuelles des attributs suivants : {{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle")}}, {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}}, {{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha")}}, {{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth")}}, {{domxref("CanvasRenderingContext2D.lineCap", "lineCap")}}, {{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin")}}, {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}, {{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX")}}, {{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY")}}, {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}}, {{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor")}}, {{domxref("CanvasRenderingContext2D.globalCompositeOperation", "globalCompositeOperation")}}, {{domxref("CanvasRenderingContext2D.font", "font")}}, {{domxref("CanvasRenderingContext2D.textAlign", "textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline")}}, {{domxref("CanvasRenderingContext2D.direction", "direction")}}, {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}}. @@ -87,7 +87,7 @@ C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des tr ### Un exemple `translate` -Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode` translate ()`, tous les rectangles seraient dessinés à la même position (0,0). La méthode `translate ()` nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction `fillRect ()`. Cela le rend un peu plus facile à comprendre et à utiliser. +Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode `translate()`, tous les rectangles seraient dessinés à la même position `(0,0)`. La méthode `translate()` nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction `fillRect()`. Cela le rend un peu plus facile à comprendre et à utiliser. 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. |