diff options
Diffstat (limited to 'files/fr/web/api/canvas_api')
13 files changed, 535 insertions, 535 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 7096bbe6e5..7444fbcf91 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 @@ -18,13 +18,13 @@ Cet article fournit un exemple intéressant concret d'utilisation de l'élément **[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -## Pourquoi ? +## Pourquoi ? 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/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 ? +## Comment ? L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 5dbc455c7e..66f1da8485 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -9,7 +9,7 @@ Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("ca 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. +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. ## Exemple @@ -38,8 +38,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; @@ -88,7 +88,7 @@ window.addEventListener('load', drawCanvas); - {{domxref("OffscreenCanvas")}}{{experimental_inline}} - {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} -Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). +Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). {{domxref("CanvasCaptureMediaStream")}} est lié. @@ -115,26 +115,26 @@ Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebG ### Bibliothèques - [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG. -- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. -- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. +- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. +- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. - [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas. - [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger. -- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. -- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. -- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. -- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. -- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. -- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. -- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. +- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. +- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. +- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. +- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. +- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. +- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. +- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. - [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art -- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas -- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas ## Spécifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} |  | +| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | ## Voir aussi 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 dc4e3366ba..f445394f18 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 @@ -146,7 +146,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 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`. +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`. Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique. 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 be0df6f74b..7b678a522a 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 @@ -91,10 +91,10 @@ Si aucun test de collision n'est effectué, notre balle sort hors du canevas rap ```js if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; + ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; + ball.vx = -ball.vx; } ``` 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 31cf501014..b3cc9f0edc 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 @@ -6,7 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} -Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. +Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. ## Les couleurs @@ -19,7 +19,7 @@ Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dess `color` est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`). -> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là . Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. +> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là . Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur. @@ -250,7 +250,7 @@ Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). > > Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. @@ -258,20 +258,20 @@ Pour les lignes de largeur paire, chaque moitié finit par être un nombre entie Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2. -### Un exemple de `lineCap` +### Un exemple de `lineCap` -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`. +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)_ - : L'extrémité des lignes est en angle droit. - `round` _(rond)_ - : Les extrémités sont arrondies. - `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. + - : 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. +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. -La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. +La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. ```js function draw() { @@ -310,16 +310,16 @@ draw(); {{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} -### Un exemple de `lineJoin` +### Un exemple de `lineJoin` -La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). +La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -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. +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)_ - - : 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. + - : 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)_ - - : Ajoute un triangle à l'extrémité commune des segments connectés. + - : Ajoute un triangle à l'extrémité commune des segments connectés. - `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. @@ -596,7 +596,7 @@ Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une coule Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} - - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à -dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à -dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : @@ -707,7 +707,7 @@ Nous allons regarder la propriété de la `font` _(police de caratères)_ et la ## Règles de remplissage Canvas -Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. +Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. Deux valeurs sont possibles : diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index a8b72b6e50..72075e3b32 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. +Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. @@ -28,7 +28,7 @@ Voici les étapes à suivre à chaque image dessinée (frame) : 3. **Dessiner les formes animées** Vous effectuez toutes les opérations pour afficher l'image. 4. **Restaurer l'état du canevas** - Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. + Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. ## Contrôle d'une animation @@ -226,9 +226,9 @@ window.requestAnimationFrame(clock); {{EmbedLiveSample("Une_horloge_animée", "180", "180")}} -## Un panorama défilant en boucle +## Un panorama défilant en boucle -Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. +Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. ```js var img = new Image(); @@ -318,7 +318,7 @@ function draw() { } ``` -En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. +En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. ```html <canvas id="canvas" width="800" height="200"></canvas> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index ca47946655..f391ead52a 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -58,7 +58,7 @@ Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...>< L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". +Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". ```js var canvas = document.getElementById('tutorial'); @@ -69,7 +69,7 @@ La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant ## Vérification de la prise en charge -Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : +Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : ```js var canvas = document.getElementById('tutorial'); @@ -110,7 +110,7 @@ Voici un modèle minimaliste, que nous allons utiliser comme point de départ da </html> ``` -Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. +Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. Voici à quoi le modèle ressemble : diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index e3343ba8a3..283e149ca1 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -25,11 +25,11 @@ Ce code configure les valeurs globales utilisées par le reste du programme. 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', -           'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', -           'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', -           'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' -         ].reverse(); + 'destination-over','destination-in','destination-out','destination-atop', + 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ].reverse(); var gcoText = [ "C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.", "La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.", @@ -68,21 +68,21 @@ Quand la page se charge, le code suivant s'exécute pour configurer et exécuter ```js window.onload = function() { -   // lum en sRGB -   var lum = { -       r: 0.33, -       g: 0.33, -       b: 0.33 -   }; -   // redimensionne le canvas -   canvas1.width = width; -   canvas1.height = height; -   canvas2.width = width; -   canvas2.height = height; -   lightMix() -   colorSphere(); -   runComposite(); -   return; + // lum en sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // redimensionne le canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix() + colorSphere(); + runComposite(); + return; }; ``` @@ -90,74 +90,74 @@ Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en ```js function createCanvas() { -    var canvas = document.createElement("canvas"); -   canvas.style.background = "url("+op_8x8.data+")"; -    canvas.style.border = "1px solid #000"; -   canvas.style.margin = "5px"; -   canvas.width = width/2; -   canvas.height = height/2; - return canvas; + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; } function runComposite() { -   var dl = document.createElement("dl"); -   document.body.appendChild(dl); -   while(gco.length) { -       var pop = gco.pop(); -       var dt = document.createElement("dt"); -       dt.textContent = pop; -       dl.appendChild(dt); -       var dd = document.createElement("dd"); -       var p = document.createElement("p"); -       p.textContent = gcoText.pop(); -       dd.appendChild(p); + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); - var canvasToDrawOn = createCanvas(); -  var canvasToDrawFrom = createCanvas(); -  var canvasToDrawResult = createCanvas(); + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); -       var ctx = canvasToDrawResult.getContext('2d'); -       ctx.clearRect(0, 0, width, height) -       ctx.save(); -       ctx.drawImage(canvas1, 0, 0, width/2, height/2); -       ctx.globalCompositeOperation = pop; -       ctx.drawImage(canvas2, 0, 0, width/2, height/2); -       ctx.globalCompositeOperation = "source-over"; -       ctx.fillStyle = "rgba(0,0,0,0.8)"; -       ctx.fillRect(0, height/2 - 20, width/2, 20); -       ctx.fillStyle = "#FFF"; -       ctx.font = "14px arial"; -       ctx.fillText(pop, 5, height/2 - 5); -       ctx.restore(); - -        var ctx = canvasToDrawOn.getContext('2d'); -        ctx.clearRect(0, 0, width, height) -        ctx.save(); -        ctx.drawImage(canvas1, 0, 0, width/2, height/2); -        ctx.fillStyle = "rgba(0,0,0,0.8)"; -        ctx.fillRect(0, height/2 - 20, width/2, 20); -        ctx.fillStyle = "#FFF"; -        ctx.font = "14px arial"; -        ctx.fillText('existing content', 5, height/2 - 5); -        ctx.restore(); - -        var ctx = canvasToDrawFrom.getContext('2d'); -        ctx.clearRect(0, 0, width, height) -        ctx.save(); -        ctx.drawImage(canvas2, 0, 0, width/2, height/2); -        ctx.fillStyle = "rgba(0,0,0,0.8)"; -        ctx.fillRect(0, height/2 - 20, width/2, 20); -        ctx.fillStyle = "#FFF"; -        ctx.font = "14px arial"; -        ctx.fillText('new content', 5, height/2 - 5); -        ctx.restore(); - -       dd.appendChild(canvasToDrawOn); -       dd.appendChild(canvasToDrawFrom); -       dd.appendChild(canvasToDrawResult); - -       dl.appendChild(dd); -   } + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(canvas1, + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle + ctx.font = "14 + ctx.fillText(' + ctx.restore + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(c + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle = "# + ctx.font = "14p + x.fillText('new c + x.restore(); + + dd.appendChil + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } }; ``` @@ -167,59 +167,59 @@ Notre programme repose sur un certain nombbre de fonctions utilitaires: ```js var lightMix = function() { -   var ctx = canvas2.getContext("2d"); -   ctx.save(); -   ctx.globalCompositeOperation = "lighter"; -   ctx.beginPath(); -   ctx.fillStyle = "rgba(255,0,0,1)"; -   ctx.arc(100, 200, 100, Math.PI*2, 0, false); -   ctx.fill() -   ctx.beginPath(); -   ctx.fillStyle = "rgba(0,0,255,1)"; -   ctx.arc(220, 200, 100, Math.PI*2, 0, false); -   ctx.fill() -   ctx.beginPath(); -   ctx.fillStyle = "rgba(0,255,0,1)"; -   ctx.arc(160, 100, 100, Math.PI*2, 0, false); -   ctx.fill(); -   ctx.restore(); -   ctx.beginPath(); -   ctx.fillStyle = "#f00"; -   ctx.fillRect(0,0,30,30) -   ctx.fill(); + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); }; ``` ```js var colorSphere = function(element) { -   var ctx = canvas1.getContext("2d"); -   var width = 360; -   var halfWidth = width / 2; -   var rotate = (1 / 360) * Math.PI * 2; // per degree -   var offset = 0; // scrollbar offset -   var oleft = -20; -   var otop = -20; -   for (var n = 0; n <= 359; n ++) { -      var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); -      var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); -      gradient.addColorStop(0, "rgba(0,0,0,0)"); -      gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); -      gradient.addColorStop(1, "rgba(255,255,255,1)"); -      ctx.beginPath(); -      ctx.moveTo(oleft + halfWidth, otop); -      ctx.lineTo(oleft + halfWidth, otop + halfWidth); -      ctx.lineTo(oleft + halfWidth + 6, otop); -      ctx.fillStyle = gradient; -      ctx.fill(); -      ctx.translate(oleft + halfWidth, otop + halfWidth); -      ctx.rotate(rotate); -      ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); -   } -   ctx.beginPath(); -   ctx.fillStyle = "#00f"; -   ctx.fillRect(15,15,30,30) -   ctx.fill(); -   return ctx.canvas; + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; }; ``` @@ -227,76 +227,76 @@ var colorSphere = function(element) { // HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { -   var H = o.H / 360, -      S = o.S / 100, -      V = o.V / 100, -      R, G, B; -   var A, B, C, D; -   if (S == 0) { -      R = G = B = Math.round(V * 255); -   } else { -      if (H >= 1) H = 0; -      H = 6 * H; -      D = H - Math.floor(H); -      A = Math.round(255 * V * (1 - S)); -      B = Math.round(255 * V * (1 - (S * D))); -      C = Math.round(255 * V * (1 - (S * (1 - D)))); -      V = Math.round(255 * V); -      switch (Math.floor(H)) { -         case 0: -            R = V; -            G = C; -            B = A; -            break; -         case 1: -            R = B; -            G = V; -            B = A; -            break; -         case 2: -            R = A; -            G = V; -            B = C; -            break; -         case 3: -            R = A; -            G = B; -            B = V; -            break; -         case 4: -            R = C; -            G = A; -            B = V; -            break; -         case 5: -            R = V; -            G = A; -            B = B; -            break; -      } -   } -   return { -      R: R, -      G: G, -      B: B -   }; + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + se { + if (H >= 1 + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * + V = Math.round(255 * V); + switch (Mat + case 0: + R = V; + G = C; + B = A; + bre + 1: + R = B; + G = V; + B = A; + bre + 2: + R = A; + G = V; + B = C; + bre + 3: + R = A; + G = B; + B = V; + bre + 4: + R = C; + G = A; + B = V; + bre + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; }; var createInterlace = function (size, color1, color2) { -   var proto = document.createElement("canvas").getContext("2d"); -   proto.canvas.width = size * 2; -   proto.canvas.height = size * 2; -   proto.fillStyle = color1; // top-left -   proto.fillRect(0, 0, size, size); -   proto.fillStyle = color2; // top-right -   proto.fillRect(size, 0, size, size); -   proto.fillStyle = color2; // bottom-left -   proto.fillRect(0, size, size, size); -   proto.fillStyle = color1; // bottom-right -   proto.fillRect(size, size, size, size); -   var pattern = proto.createPattern(proto.canvas, "repeat"); -   pattern.data = proto.canvas.toDataURL(); -   return pattern; + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; }; var op_8x8 = createInterlace(8, "#FFF", "#eee"); 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 a38f95eadd..57d00b74d8 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 @@ -14,120 +14,120 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} -Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. +Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. ## La grille -Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à  `x` pixels à partir de la gauche et à  `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut. +Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.  -## Dessin de rectangles +## Dessin de rectangles -Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à -dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. +Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à -dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. -Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : +Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : - {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}} - : Dessine un rectangle rempli. - {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}} - - : Dessine un contour rectangulaire + - : Dessine un contour rectangulaire - {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}} - - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. + - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. -Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. +Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. -Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. +Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. ### Exemple de forme rectangulaire ```html hidden <html> - <body onload="draw();"> -  <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { -   var ctx = canvas.getContext('2d'); - -   ctx.fillRect(25, 25, 100, 100); -   ctx.clearRect(45, 45, 60, 60); -   ctx.strokeRect(50, 50, 50, 50); - } + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } } ``` -Le résultat de cet exemple est montré ci-dessous. +Le résultat de cet exemple est montré ci-dessous. {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}} -La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. +La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. -Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. +Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas. -## Dessin de trajets +## Dessin de trajets -Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : +Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : 1. Tout d'abord, vous devez créer le trajet. -2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. +2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. 3. Finalement, vous devez fermer le trajet. -4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. +4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. -Voici les functions utilisées pour réaliser ces étapes : +Voici les functions utilisées pour réaliser ces étapes : - {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} - - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. + - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. - [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) - - : Méthodes pour définir différents trajets pour les objets. + - : Méthodes pour définir différents trajets pour les objets. - {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}} - - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. + - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. - {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} - - : Dessine la forme en traçant son contour. + - : Dessine la forme en traçant son contour. - {{domxref("CanvasRenderingContext2D.fill", "fill()")}} - - : Dessine une forme pleine en remplissant la zone de contenu du trajet. + - : Dessine une forme pleine en remplissant la zone de contenu du trajet. -La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. +La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. -> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. +> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt. -La troisième méthode, optionnelle, est l'appel à  `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. +La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. -> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. +> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. ### Dessin d'un triangle -Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : +Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); - } + } } ``` @@ -137,28 +137,28 @@ Le résultat ressemble à : ### Déplacement du stylo -Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. +Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. - {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}} - : Déplace le stylo aux coordonnées `x` et `y`. -Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. +Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. -Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. +Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. ```html hidden <html> - <body onload="draw();"> -  <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { -   var ctx = canvas.getContext('2d'); + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Cercle extérieur @@ -169,15 +169,15 @@ function draw() { ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Oeil droite ctx.stroke(); - } + } } ``` -Le résultat ressemble à ce qui suit : +Le résultat ressemble à ce qui suit : {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}} -Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. +Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. > **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous. @@ -186,107 +186,107 @@ Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes Pour dessiner des lignes droites, utilisez la méthode `lineTo()`. - {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}} - - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. + - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. -Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. +Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. L'exemple ci-dessous dessine deux triangles, un rempli et un filaire. ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); - -   // Triangle plein -   ctx.beginPath(); -   ctx.moveTo(25, 25); -   ctx.lineTo(105, 25); -   ctx.lineTo(25, 105); -   ctx.fill(); - -   // Triangle filaire -   ctx.beginPath(); -   ctx.moveTo(125, 125); -   ctx.lineTo(125, 45); -   ctx.lineTo(45, 125); -   ctx.closePath(); -   ctx.stroke(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Triangle plei + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(1 + ctx.lineTo(2 + ctx.fill(); + + // Triangle filaire + ctx.beginPath(); + ctx.moveTo(125, 125) + ctx.lineTo(125, + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } } ``` -Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. +Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. {{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}} -Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. +Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. ### Les arcs -Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. +Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. - {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}} - - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). + - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). - **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}** - - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. + - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. -Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. +Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. -> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. +> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. -L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. +L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. -Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. +Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne. -L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. +L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. > **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels. ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="200"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="200"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); - -   for(var i = 0; i < 4; i++) { -     for(var j = 0; j < 3; j++) { -       ctx.beginPath(); -       var x = 25 + j * 50; // Coordonnée x -       var y = 25 + i * 50; // Coordonnée y -       var rayon = 20; // Rayon de l'arc -       var angleInitial = 0; // Point de départ sur le cercle -       var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle -       var antihoraire = i % 2 != 0; // Horaire ou antihoraire - -       ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire); - -       if (i>1) { -         ctx.fill(); -       } else { -         ctx.stroke(); -       } -     } -   } - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + for(var i = 0; i < 4 + for(var j = 0; j < + ctx.beginPath(); + var x = 25 + j * 50; // Coordonné + var y = 25 + i * 50; // Coordonné + var rayon = 20; // Rayon de l'arc + var angleInitial = 0; // Point de départ sur le cercle + var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d + var antihoraire + + + + f + + + + + } + } + } } ``` @@ -294,22 +294,22 @@ function dessiner() { ### Les courbes quadratiques et de Bézier -Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. +Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}} - - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. + - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. - {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}} - - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). + - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). -La différence entre ces deux méthodes est mieux décrite par l'image à  droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle. +La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.  -Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et  `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. +Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. -Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. +Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. -Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. +Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. #### Courbes de Bézier quadratiques @@ -317,28 +317,28 @@ Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bu ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); - -   // Exemples de courbes quadratiques -   ctx.beginPath(); -   ctx.moveTo(75, 25); -   ctx.quadraticCurveTo(25, 25, 25, 62.5); -   ctx.quadraticCurveTo(25, 100, 50, 100); -   ctx.quadraticCurveTo(50, 120, 30, 125); -   ctx.quadraticCurveTo(60, 120, 65, 100); -   ctx.quadraticCurveTo(125, 100, 125, 62.5); -   ctx.quadraticCurveTo(125, 25, 75, 25); -   ctx.stroke(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemples de c + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100) + ctx.quadraticCurveTo(125, 100, 125, 62 + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); } } ``` @@ -347,32 +347,32 @@ function dessiner() { #### Les courbes de Bézier cubiques -Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. +Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); - -   // Exemple de courbes cubiques -   ctx.beginPath(); -   ctx.moveTo(75, 40); -   ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); -   ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); -   ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); -   ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); -   ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); -   ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); -   ctx.fill(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemple de co + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5 + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); } } ``` @@ -381,125 +381,125 @@ function dessiner() { ### Rectangles -En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. +En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. - {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}} - - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. + - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. -Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. +Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. ### Combiner les possibilités -Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. +Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. ```html hidden <html> - <body onload="dessiner();"> -  <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { -   var ctx = canevas.getContext('2d'); - -   rectArrondi(ctx, 12, 12, 150, 150, 15); -   rectArrondi(ctx, 19, 19, 150, 150, 9); -   rectArrondi(ctx, 53, 53, 49, 33, 10); -   rectArrondi(ctx, 53, 119, 49, 16, 6); -   rectArrondi(ctx, 135, 53, 49, 33, 10); -   rectArrondi(ctx, 135, 119, 25, 49, 10); - -   ctx.beginPath(); -   ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false); -   ctx.lineTo(31, 37); -   ctx.fill(); - -   for(var i = 0; i< 8; i++) { -     ctx.fillRect(51 + i * 16, 35, 4, 4); -   } - -   for(i = 0; i < 6; i++) { -     ctx.fillRect(115, 51 + i * 16, 4, 4); -   } - -   for(i = 0; i < 8; i++) { -     ctx.fillRect(51 + i * 16, 99, 4, 4); -   } - -   ctx.beginPath(); -   ctx.moveTo(83, 116); -   ctx.lineTo(83, 102); -   ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); -   ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); -   ctx.lineTo(111, 116); -   ctx.lineTo(106.333, 111.333); -   ctx.lineTo(101.666, 116); -   ctx.lineTo(97, 111.333); -   ctx.lineTo(92.333, 116); -   ctx.lineTo(87.666, 111.333); -   ctx.lineTo(83, 116); -   ctx.fill(); - -   ctx.fillStyle = "white"; -   ctx.beginPath(); -   ctx.moveTo(91, 96); -   ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); -   ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); -   ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); -   ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); -   ctx.moveTo(103, 96); -   ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); -   ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); -   ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); -   ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); -   ctx.fill(); - -   ctx.fillStyle = "black"; -   ctx.beginPath(); -   ctx.arc(101, 102, 2, 0, Math.PI * 2, true); -   ctx.fill(); - -   ctx.beginPath(); -   ctx.arc(89, 102, 2, 0, Math.PI * 2, true); -   ctx.fill(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + rectArrondi(ctx, 12, 12, 150, 150, 15 + rectArrondi(ctx, 19, 19, 150, 150, 9) + rectArrondi(ctx, 53, 53, 49, 33, 10); + rectArrondi(ctx, 53, 119, 49, 16, 6); + rectArrondi(ctx, 1 + rectArrondi(ctx, + + ctx.beginPath(); + ctx.arc(37, + ctx.lineTo(31, 37); + ctx.fill(); + + for(var i = 0; i< 8; i++ + + } + + for(i = 0; i < 6; i++) { + + } + + for(i = 0; i < 8; i+ + ctx.fillRect(51 + i * + } + + ctx.beginPat + ctx.moveTo(83, 116); + ctx.lineTo(83, 1 + ctx.bezierCurveTo(8 + ctx.bezierCurveTo(105, 88, 1 + ctx.lineTo(111, 116) + ctx.lineTo(1 + ctx.lineTo(101.666, + ctx.lineTo(97, 1 + ctx.lineTo(92.333, + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.moveTo(9 + ctx.bezierCurveT + ctx.bezierCurveTo(87, 103, 88, 106, 91, 10 + ctx.bezierCu + ctx.bezierCurveTo(95, 99 + ctx.moveTo(103, + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101) + ctx.bezierCu + ctx.bezierCurveT + ctx.bezierCurveTo(107, 99, 106, 96, 103, 9 + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.arc(101, + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } } // Une fonction utilitaire pour tracer des rectangles avec des coins arrondis function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { - ctx.beginPath(); - ctx.moveTo(x, y + rayon); - ctx.lineTo(x, y + hauteur - rayon); - ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); - ctx.lineTo(x + largeur - rayon, y + hauteur); - ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); - ctx.lineTo(x + largeur, y + rayon); - ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); - ctx.lineTo(x + rayon,y); - ctx.quadraticCurveTo(x, y, x, y + rayon); - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y + rayon); + ctx.lineTo(x, y + hauteur - rayon); + ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); + ctx.lineTo(x + largeur - rayon, y + hauteur); + ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); + ctx.lineTo(x + largeur, y + rayon); + ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); + ctx.lineTo(x + rayon,y); + ctx.quadraticCurveTo(x, y, x, y + rayon); + ctx.stroke(); } ``` -L'image résultante ressemble à ce qui suit : +L'image résultante ressemble à ce qui suit : {{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}} -Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. +Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. -Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. +Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. ## 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 [`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). + - : 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). <!----> @@ -507,16 +507,16 @@ Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de tra new Path2D(trajet); // copie depuis un autre objet Path2D new Path2D(d); // trajet depuis des données de trajet SVG -Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. +Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. -L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. +L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. -- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} - - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. +- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} + - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. ### Exemple de Path2D -Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. +Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. ```html hidden <html> @@ -547,11 +547,11 @@ function dessiner() { {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}} -### Utilisation de trajets SVG +### Utilisation de trajets SVG -Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. +Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. -Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). +Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md index f6f3ba108f..42b11ed789 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -6,11 +6,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility --- {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} -L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. +L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. ## Moyen de repli -Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. +Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. ```html <canvas> @@ -25,11 +25,11 @@ Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilis </canvas> ``` -Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). +Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). ## Les règles ARIA -Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. +Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. ```html <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> @@ -37,16 +37,16 @@ Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/AR ## Zones cibles (hit Region) -Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). +Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Ajoute une "hit region" au canvas.. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. + - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Retire toutes les "hit regions" du cnavas. -Vous pouvez ajouter une "hit region" à  votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. +Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. ```html <canvas id="canvas"></canvas> @@ -60,29 +60,29 @@ ctx.fill(); ctx.addHitRegion({id: 'circle'}); canvas.addEventListener('mousemove', function(event) { - if (event.region) { -   alert('hit region: ' + event.region); - } + if (event.region) { + alert('hit region: ' + event.region); + } }); </script> ``` -La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): +La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): ```js ctx.addHitRegion({control: element}); ``` -Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). +Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). ## Focus rings -Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. +Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}} - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant. -De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. +De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}} - : Affiche le chemin courant ou le chemin donné. diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 7b3b723efb..ded7ba9431 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. +L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. ## Conseils sur les performances Ceci est une liste de conseils pour améliorer les performances -### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue. @@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, prà ### Redimensionner les canvas avec CSS transform -[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. ```js var scaleX = window.innerWidth / canvas.width; @@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; ``` -### Utiliser l'attribut `moz-opaque` (Gecko only) +### Utiliser l'attribut `moz-opaque` (Gecko only) Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. 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 7c6fadf160..49b70c9c31 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 @@ -13,29 +13,29 @@ Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels d L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants : - `width` - - : La largeur de l'image en pixels. + - : La largeur de l'image en pixels. - `height` - - : La hauteur de l'image en pixels. + - : La hauteur de l'image en pixels. - `data` - - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et  255 (inclus). + - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). -La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à -dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. +La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à -dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. -Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à  (`height`×`width`×4)-1. +Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. -Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : +Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : ```js composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; ``` -Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : +Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : ```js var nbOctets = imageData.data.length; ``` -## Création d'un objet `ImageData` +## Création d'un objet `ImageData` 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()` : @@ -43,9 +43,9 @@ Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode var monImageData = ctx.createImageData(largeur, hauteur); ``` -Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. +Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. -Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** +Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** ```js var monImageData = ctx.createImageData(autreImageData); @@ -53,17 +53,17 @@ var monImageData = ctx.createImageData(autreImageData); ## Obtention des données pixel pour un contexte -Pour obtenir un objet  `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : +Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : ```js var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur); ``` -Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. +Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. -> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. +> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. -Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). +Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). ### Une pipette à couleur @@ -105,9 +105,9 @@ Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRende ctx.putImageData(monImageData, dx, dy); ``` -Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. +Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : +Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : ```js ctx.putImageData(monImageData, 0, 0); @@ -115,7 +115,7 @@ ctx.putImageData(monImageData, 0, 0); ### Niveaux de gris et inversion de couleurs -Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. +Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. ```html hidden <canvas id="canevas" width="300" height="227"></canvas> @@ -189,8 +189,8 @@ zoomctx.drawImage(canvas, <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> - <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> - Enable image smoothing + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing </label> </div> ``` 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 490e52c4fe..fa45263a14 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -190,7 +190,7 @@ Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons ### Un exemple `scale` -Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. +Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. ```js function draw() { |