From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../drawing_graphics/index.html | 52 +++++++++++----------- 1 file changed, 26 insertions(+), 26 deletions(-) (limited to 'files/fr/learn/javascript/client-side_web_apis/drawing_graphics') diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html index 0af7689eaa..95c9f7f8e4 100644 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.html @@ -16,9 +16,9 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
-

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

+

Le navigateur contient des outils de programmation graphique très puissants, du langage SVG (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir API Canvas et WebGL). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus.

- +
@@ -50,7 +50,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics

Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez  par la suite suivre le tutoriel WebGL, qui couvre le code WebGL brut.

-

Note: Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

+

Note : Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL.

Apprentissage actif: Débuter avec un <canvas>

@@ -112,7 +112,7 @@ var height = canvas.height = window.innerHeight;
-

Note: Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

+

Note : Vous devrez généralement définir la taille de l'image en utilisant les attributs HTML ou les propriétéss DOM, comme expliqué ci-dessus. Vous pourriez théoriquement utiliser CSS, le problème étant que le dimensionnement le canvas est alors effectué après que le contenu canvas n'ait été calculé, et comme toute autre image (puisque le canvas une fois affiché n'est plus qu'une simple image), elle peut devenir pixelisée/déformée.

Obtenir le contexte du canvas et configuration finale

@@ -124,7 +124,7 @@ var height = canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
-

Note: Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

+

Note : Vous pouvez choisir d'autres types de contexte comme webgl pour WebGL, webgl2 pour WebGL 2, etc., mais nous n'en aurons pas besoin dans cet article.

Voilà — notre canvas est maintenant préparé et prêt à être dessiné! La variable ctx contient désormais un objet {{domxref("CanvasRenderingContext2D")}}, et toutes les opérations de dessin sur le canvas impliqueront de manipuler cet objet.

@@ -144,7 +144,7 @@ ctx.fillRect(0, 0, width, height);

De nombreuses opérations doivent recevoir des coordonnées en entrée pour savoir où dessiner quelque chose — le coin supérieur gauche du canvas est le point (0, 0), l'axe horizontal (x) va de gauche à droite, et l'axe vertical (y) va de haut en bas.

-

+

Dessiner des formes est souvent fait en utilisant la forme rectangle, ou alors en traçant une ligne le long d'un certain chemin puis en remplissant la forme. Nous allons vous montrer ci-dessous comment faire ces deux choses.

@@ -208,7 +208,7 @@ ctx.strokeRect(25, 25, 175, 200);

{{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/2_canvas_rectangles.html", '100%', 250)}}

-

Note: Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

+

Note : Le code terminé est disponible sur GitHub, 2_canvas_rectangles.html.

Dessiner des chemins

@@ -284,7 +284,7 @@ ctx.fill();

 

-

+

Une des formule trigonométrique de base stipule que la longueur du côté adjacent mutiplié par la tangente de l'angle est égale à l'opposé, soit 50 * Math.tan(degToRad(60)). Nous utilisons notre fonction degToRad() pour convertir 60 degrés en radians, puisque {{jsxref("Math.tan()")}} attend une valeur en radians.

@@ -324,7 +324,7 @@ ctx.fill();
-

Note: 0 degrés est horizontalement vers la droite.

+

Note : 0 degrés est horizontalement vers la droite.

  • @@ -350,11 +350,11 @@ ctx.fill();

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/3_canvas_paths.html", '100%', 200)}}

    -

    Note: Le code finit est disponible sur GitHub, 3_canvas_paths.html.

    +

    Note : Le code finit est disponible sur GitHub, 3_canvas_paths.html.

    -

    Note: Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

    +

    Note : Pour en savoir plus sur les fonctions de dessin avancées, telles que les courbes Bézier, consultez notre tutoriel Dessiner des formes avec le canevas.

    Texte

    @@ -388,7 +388,7 @@ ctx.fillText('Canvas text', 50, 150);

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/4_canvas_text.html", '100%', 180)}}

    -

    Note: Le code final est disponible sur GitHub, 4_canvas_text.html.

    +

    Note : Le code final est disponible sur GitHub, 4_canvas_text.html.

    Jouez avec et voyez ce que vous pouvez faire! Vous pouvez trouver plus d'information sur les options disponibles pour ajouter du texte sur un canvas dans Dessin de texte avec canvas.

    @@ -440,7 +440,7 @@ image.src = 'firefox.png';

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/getting-started/5_canvas_images.html", '100%', 260)}}

    -

    Note: Le code final est disponible sur GitHub, 5_canvas_images.html.

    +

    Note : Le code final est disponible sur GitHub, 5_canvas_images.html.

    Boucles et animations

    @@ -542,7 +542,7 @@ ctx.rotate(degToRad(5));
    -

    Note: Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

    +

    Note : Le code terminé est disponible sur GitHub, 6_canvas_for_loop.html.

    Animations

    @@ -596,7 +596,7 @@ loop();
    -

    Note: Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

    +

    Note : Nous ne couvrirons pas save() et restore() ici, mais elles sont bien expliquées dans notre tutoriel Transformations (et ceux qui le suivent).

    Une animation simple de personnage

    @@ -627,7 +627,7 @@ var posX = 0;

    L'image de sprites (que nous avons respectueusement emprunté à Mike Thomas dans son article Create a sprite sheet walk cycle using using CSS animation — créer un cycle de marche avec une feuille de sprites en utilisant les animations CSS) ressemble à ça:

    -

    +

    Elle contient six sprites qui constituent une séquence de marche — chacun a 102 pixels de large et 148 pixels de hauteur. Pour afficher chaque sprite proprement, nous allons devoir utiliser drawImage() pour découper un seul sprite de l'image et n'afficher que cette partie, comme nous l'avons fait précédemment avec le logo Firefox. La coordonnée X de la découpe devra être un multiple de 102 et la coordonnée Y sera toujours 0. La taille de la découpe sera toujours de 102 pixels par 148.

    • @@ -700,7 +700,7 @@ var posX = 0;

    {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/loops_animation/7_canvas_walking_animation.html", '100%', 260)}}

    -

    Note: Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

    +

    Note : Le code final est disponible sur GitHub, 7_canvas_walking_animation.html.

    Une application simple de dessin

    @@ -753,7 +753,7 @@ canvas.onmouseup = function() { draw();
    -

    Note: Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

    +

    Note : Les types d'{{htmlelement("input")}} range et color sont relativement bien pris en charge parmi les différents navigateurs, à l'exception des versions d'Internet Explorer inférieures à 10; et Safari ne prend pas en charge le type color. Si votre navigateur ne prend pas en charge ces types, il affichera simplement un champ texte et vous n'aurez qu'à entrer des valeurs de couleur et numéro valides vous-mêmes.

    WebGL

    @@ -881,7 +881,7 @@ scene.add(spotLight);

    Vous pouvez trouver le code terminé sur GitHub.

    -

    Note: Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

    +

    Note : Dans notre repo GitHub vous pouvez également trouver d'autres exemples 3D intéressants — Three.js Video Cube (le voir en direct). On utilise {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} pour prendre un flux vidéo à partir d'une webcam de l'ordinateur et le projetons sur le côté du cube comme texture!

    Sommaire

    @@ -913,11 +913,11 @@ scene.add(spotLight);

    Dans ce module

    -- cgit v1.2.3-54-g00ecf
    Prérequis: