From 6772831200d14c2436aea2d0c837f40dbf12156f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 26 Sep 2021 13:11:47 +0200 Subject: Prepare Web API section for Markdown conversion (#2464) * Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove 
 for JS w/ language-js class

* Remove 
 for HTML w/ language-html class

* Remove 
 for other lang w/ language-* class

* Rm highlighted line in code samples

* fix links, internal, external, absolute URLs

* missing file from last commit

* Fix styles errors apart from table + some classes

* Fix notes and warnings (+ some other :x)

* fix typo during merge which broke a doc

* aand forgot a conflict

* fix remaining classes of errors except dls and images

* Fix dls

* Fix images (deki/mozillademos) and remaining style issues

* Remove script tag from svg file

* Remove script tag from svg fileS

* Compress SVG files for CI
---
 files/fr/web/api/canvas_api/index.html | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

(limited to 'files/fr/web/api/canvas_api/index.html')

diff --git a/files/fr/web/api/canvas_api/index.html b/files/fr/web/api/canvas_api/index.html
index a697d99b2a..9c3ea0f0ef 100644
--- a/files/fr/web/api/canvas_api/index.html
+++ b/files/fr/web/api/canvas_api/index.html
@@ -9,11 +9,11 @@ translation_of: Web/API/Canvas_API
 ---
 
{{IncludeSubnav("/fr/docs/Jeux")}} {{CanvasSidebar}}

 
-
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

+
Ajouté en HTML5, l'élément {{HTMLElement("canvas")}} est un nouvel élément qui peut être utilisé pour dessiner des graphismes via des scripts JavaScript. Par exemple, Il peut être utilisé pour dessiner des graphes, faire des compositions de photos, des animations, ou même faire du traitement ou de l'affichage de vidéos en temps réel.

 
-
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 1.5). 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 Explorer Canvas  de Google.

+
Les applications Mozilla ont commencé à supporter <canvas> à partir de Gecko 1.8 (c'est-à-dire Firefox 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 Explorer Canvas  de Google.

 
-
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

+
L'élément <canvas> est aussi utilisé par WebGL pour afficher des graphismes 3D avec accélération matérielle sur des pages web.

 
 
Exemple

 
@@ -21,12 +21,12 @@ translation_of: Web/API/Canvas_API
 
 
HTML

 
-
<canvas id="canvas"></canvas>
+
<canvas id="canvas"></canvas>
 

 
 
JavaScript

 
-
var canvas = document.getElementById('canvas');
+
var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 
 ctx.fillStyle = 'green';
@@ -35,10 +35,9 @@ ctx.fillRect(10, 10, 100, 100);
 
 
Éditez le code ci-dessous pour voir les changements avoir lieu directement dans le canvas:

 
-
 
-
{{ EmbedLiveSample('Playable_code', 700, 360) }}

+
{{ EmbedLiveSample('code_jouable', 700, 360) }}

 
 
Références

 
-

 
    
  
  • {{domxref("HTMLCanvasElement")}}
    • 
  
  • {{domxref("CanvasRenderingContext2D")}}
    • 
@@ -92,9 +89,8 @@ 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.

+
Les interfaces liées au WebGLRenderingContext sont référencées sous WebGL.

 
 
{{domxref("CanvasCaptureMediaStream")}} est lié.

 
@@ -103,7 +99,7 @@ window.addEventListener('load', drawCanvas);
 

  
Tutoriel canvas

  
Un tutoriel complet qui couvre à la fois l'usage élémentaire de <canvas> mais aussi ses fonctionnalités avancées.

- 
Extraits de code : Canvas

+ 
Extraits de code : Canvas

  
Quelques extraits de code orientés vers les développeurs d'extension qui utilisent <canvas>.

  
Demo: Un raycaster basique avec canvas

  
Une demonstration d'animation utilisant le ray-tracing dans un élément canvas.

@@ -134,7 +130,7 @@ window.addEventListener('load', drawCanvas);
  
  • PlayCanvas est un moteur de jeu open-source.
    • 
  
  • Pixi.js est un moteur de jeu open-source.
    • 
  
  • PlotKit est une bibliothèque permettant de réaliser des diagrammes et des graphiques.
    • 
- 
  • Rekapi est une API d'animation par key-framing pour Canvas.
    • 
+ 
  • Rekapi est une API d'animation par key-framing pour Canvas.
    • 
  
  • 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 crée des visualisation de données interactives en 2D avec canvas pour le Web.
    • 
  
  • EaselJS est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art
    • 
-- 
cgit v1.2.3-54-g00ecf