diff options
Diffstat (limited to 'files/fr/web/api/canvas_api')
7 files changed, 18 insertions, 19 deletions
diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index 0629dc07f9..7096bbe6e5 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -22,7 +22,7 @@ Cet article fournit un exemple intéressant concret d'utilisation de l'élément Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était **déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. -La [présentation](/fr/docs/Web/HTML/Canvas) et le [tutoriel ](/fr/docs/Tutoriel_canvas)[](/fr/docs/Tutoriel_canvas)canvas que j'ai trouvé ici sur MDC sont excellents, mais personne n'a encore rien écrit sur l'animation, j'ai donc pensé porter un "raycaster" basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. +La [présentation](/fr/docs/Web/API/Canvas_API) et le [tutoriel](/fr/docs/Web/API/Canvas_API/Tutorial) `canvas` que j'ai trouvé ici sur MDN sont excellents, mais personne n'a encore rien écrit sur l'animation. J'ai donc pensé porter un « raycaster » basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. ## Comment ? diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 0cef55c848..5dbc455c7e 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Canvas_API Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts [JavaScript](/fr/docs/JavaScript). Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel. -Les applications Mozilla ont commencé à supporter \<canvas> à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Firefox_1.5_pour_les_développeurs)). L'élément a été introduit à l'origine par Apple pour le [Dashboard d'OS X](http://www.apple.com/macosx/features/dashboard/) et pour Safari. Internet Explorer supporte \<canvas> depuis la version 9 et ultérieures, pour les versions précédentes d'IE, une page peut effectuer ce support de \<canvas> en incluant un script depuis le projet [Explorer Canvas ](http://excanvas.sourceforge.net/)de Google. +Les applications Mozilla ont commencé à supporter `<canvas>` à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Mozilla/Firefox/Releases/1.5)). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte `<canvas>` depuis la version 9 et ultérieures ; pour les versions précédentes d'IE, une page peut effectuer ce support de `<canvas>` en incluant un script depuis le projet [« <i lang="en">Explorer Canvas</i> »](https://github.com/arv/explorercanvas) de Google. L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index 1d307ad69e..dc4e3366ba 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -55,7 +55,7 @@ Le document XHTML utilisé pour rendre ce contenu est montré ci-dessous : Les éléments clés à retenir sont : -1. Ce document dispose de deux balises [`canvas`](/fr/docs/Web/HTML/Element/canvas), avec les IDs `c1 `et `c2 :` l'élément `c1` est utilisé pour afficher l'image courante de la vidéo originale, pendant que `c2` est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; `c2` est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert. +1. Ce document dispose de deux balises [`canvas`](/fr/docs/Web/HTML/Element/canvas), avec les identifiants `c1` et `c2` l'élément `c1` est utilisé pour afficher l'image courante de la vidéo originale, pendant que `c2` est utilisé pour afficher la vidéo après application de l'effet d'incrustation ; `c2` est préchargé avec la même image que celle qui sera utilisée pour le remplacement du fond vert. 2. Le code JavaScript est importé dans le script nommé `main.js` ; Ce script utilise les fonctionnalités propres à la version 1.8, aussi cette version est précisée, à la ligne 22, quand le script est importé. 3. Quand le document se charge, la méthode `processor.doLoad()`, dans le script `main.js`, est exécutée. @@ -144,7 +144,7 @@ Quand la routine est appelée, l'élément vidéo affiche les données de la plu  -La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData() `sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. +La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData()` sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. 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. |