From c05efa8d7ae464235cf83d7c0956e42dc6974103 Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:14 +0200 Subject: move *.html to *.md --- files/fr/web/api/offscreencanvas/index.html | 147 ---------------------------- files/fr/web/api/offscreencanvas/index.md | 147 ++++++++++++++++++++++++++++ 2 files changed, 147 insertions(+), 147 deletions(-) delete mode 100644 files/fr/web/api/offscreencanvas/index.html create mode 100644 files/fr/web/api/offscreencanvas/index.md (limited to 'files/fr/web/api/offscreencanvas') diff --git a/files/fr/web/api/offscreencanvas/index.html b/files/fr/web/api/offscreencanvas/index.html deleted file mode 100644 index fa540f07d4..0000000000 --- a/files/fr/web/api/offscreencanvas/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: OffscreenCanvas -slug: Web/API/OffscreenCanvas -tags: - - API - - Canevas - - Experimental - - Interface - - Reference -translation_of: Web/API/OffscreenCanvas ---- -
{{APIRef("Canvas API")}} {{SeeCompatTable}}
- -

L'interface OffscreenCanvas fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et worker.

- -
-

Note : Cette API n'est actuellement implémentée que pour les contextes WebGL1 etWebGL2. Voir {{bug(801176)}} pour le support de l'API canvas depuis les workers.

-
- -

Constructeur

- -
-
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
-
Constructeur OffscreenCanvas. Crée un nouvel objet OffscreenCanvas.
-
- -

Propriétés

- -
-
{{domxref("OffscreenCanvas.height")}}
-
La hauteur du canevas hors écran.
-
{{domxref("OffscreenCanvas.width")}}
-
La largeur du canevas hors écran.
-
- -

Méthodes

- -
-
{{domxref("OffscreenCanvas.getContext()")}}
-
Retourne un contexte de rendu pour le canevas hors écran.
-
- -
-
{{domxref("OffscreenCanvas.toBlob()")}}
-
Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
-
- -
-
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
-
Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du OffscreenCanvas.
-
- -

Exemples

- -

Affichage synchrone d'images produites par un OffscreenCanvas

- -

Une façon d'utiliser l'API OffscreenCanvas est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet OffscreenCanvas pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.

- -

Pour afficher l'ImageBitmap, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant canvas.getContext("bitmaprenderer") sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'ImageBitmap donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'ImageBitmap précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'ImageBitmap sur le canevas et transférera son appartenance au canevas. Un seul OffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objets ImageBitmapRenderingContext.

- -

Étant donnés ces deux éléments {{HTMLElement("canvas")}} :

- -
<canvas id="une"></canvas>
-<canvas id="deux"></canvas>
- -

le code suivant fournira la restitution, en utilisant un OffscreenCanvas comme décrit ci-dessus.

- -
var une = document.getElementById("une").getContext("bitmaprenderer");
-var deux = document.getElementById("deux").getContext("bitmaprenderer");
-
-var horsEcran = new OffscreenCanvas(256, 256);
-var gl = horsEcran.getContext('webgl');
-
-// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
-
-// Exécuter la restitution dans le premier canevas
-var bitmapUne = horsEcran.transferToImageBitmap();
-une.transferImageBitmap(bitmapUne);
-
-// ... davantage de dessin pour le second canevas en utilisant le context gl ...
-
-// Exécuter la restitution pour le second canevas
-var bitmapDeux = horsEcran.transferToImageBitmap();
-deux.transferImageBitmap(bitmapDeux);
-
- -

Affichage asynchrone d'images produites par un OffscreenCanvas

- -

Une autre façon d'utiliser l'API OffscreenCanvas est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet OffscreenCanvas à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un RenderingContext à partir de ce OffscreenCanvas.

- -

Afin de rendre les cadres visibles, vous pouvez appeler commit() sur ce RenderingContext, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.

- -

Notez que dans Firefox, cette API n'est actuellement implémentée que pour le contexte WebGL ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.

- -

main.js (code du thread principal) :

- -
var canevasHtml = document.getElementById("canevas");
-var horsEcran = canevasHtml.transferControlToOffscreen();
-
-var worker = new Worker("offscreencanvas.js");
-worker.postMessage({canvas: offscreen}, [offscreen]);
-
- -

offscreencanvas.js (code worker) :

- -
onmessage = function(evt) {
-  var canevas = evt.data.canvas.
-  var gl = canevas.getContext("webgl");
-
-  // ... un peu de dessin en utilisant le contexte gl ...
-
-  // Renvoyer les images dans l'HTMLCanvasElement original
-  gl.commit();
-};
-
- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}} 
- -

Compatibilité des navigateurs

- -

{{Compat("api.OffscreenCanvas")}}

- -

Voir aussi

- - diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md new file mode 100644 index 0000000000..fa540f07d4 --- /dev/null +++ b/files/fr/web/api/offscreencanvas/index.md @@ -0,0 +1,147 @@ +--- +title: OffscreenCanvas +slug: Web/API/OffscreenCanvas +tags: + - API + - Canevas + - Experimental + - Interface + - Reference +translation_of: Web/API/OffscreenCanvas +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

L'interface OffscreenCanvas fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et worker.

+ +
+

Note : Cette API n'est actuellement implémentée que pour les contextes WebGL1 etWebGL2. Voir {{bug(801176)}} pour le support de l'API canvas depuis les workers.

+
+ +

Constructeur

+ +
+
{{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}}
+
Constructeur OffscreenCanvas. Crée un nouvel objet OffscreenCanvas.
+
+ +

Propriétés

+ +
+
{{domxref("OffscreenCanvas.height")}}
+
La hauteur du canevas hors écran.
+
{{domxref("OffscreenCanvas.width")}}
+
La largeur du canevas hors écran.
+
+ +

Méthodes

+ +
+
{{domxref("OffscreenCanvas.getContext()")}}
+
Retourne un contexte de rendu pour le canevas hors écran.
+
+ +
+
{{domxref("OffscreenCanvas.toBlob()")}}
+
Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas.
+
+ +
+
{{domxref("OffscreenCanvas.transferToImageBitmap()")}}
+
Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du OffscreenCanvas.
+
+ +

Exemples

+ +

Affichage synchrone d'images produites par un OffscreenCanvas

+ +

Une façon d'utiliser l'API OffscreenCanvas est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet OffscreenCanvas pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert.

+ +

Pour afficher l'ImageBitmap, vous pouvez utiliser un contexte {{domxref("ImageBitmapRenderingContext")}}, qui peut être créé en appelant canvas.getContext("bitmaprenderer") sur un élément canevas (visible). Ce contexte fournit uniquement des fonctionnalités pour remplacer le contenu du canevas par l'ImageBitmap donnée. Un appel à {{domxref("ImageBitmapRenderingContext.transferImageBitmap()")}} avec l'ImageBitmap précédemment affichée et enregistrée à partir de OffscreenCanvas, affichera l'ImageBitmap sur le canevas et transférera son appartenance au canevas. Un seul OffscreenCanvas peut transférer des images dans un nombre arbitraire d'autres objets ImageBitmapRenderingContext.

+ +

Étant donnés ces deux éléments {{HTMLElement("canvas")}} :

+ +
<canvas id="une"></canvas>
+<canvas id="deux"></canvas>
+ +

le code suivant fournira la restitution, en utilisant un OffscreenCanvas comme décrit ci-dessus.

+ +
var une = document.getElementById("une").getContext("bitmaprenderer");
+var deux = document.getElementById("deux").getContext("bitmaprenderer");
+
+var horsEcran = new OffscreenCanvas(256, 256);
+var gl = horsEcran.getContext('webgl');
+
+// ... un peu de dessin pour le premier canevas en utilisant le contexte gl ...
+
+// Exécuter la restitution dans le premier canevas
+var bitmapUne = horsEcran.transferToImageBitmap();
+une.transferImageBitmap(bitmapUne);
+
+// ... davantage de dessin pour le second canevas en utilisant le context gl ...
+
+// Exécuter la restitution pour le second canevas
+var bitmapDeux = horsEcran.transferToImageBitmap();
+deux.transferImageBitmap(bitmapDeux);
+
+ +

Affichage asynchrone d'images produites par un OffscreenCanvas

+ +

Une autre façon d'utiliser l'API OffscreenCanvas est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet OffscreenCanvas à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un RenderingContext à partir de ce OffscreenCanvas.

+ +

Afin de rendre les cadres visibles, vous pouvez appeler commit() sur ce RenderingContext, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original.

+ +

Notez que dans Firefox, cette API n'est actuellement implémentée que pour le contexte WebGL ({{domxref ("WebGLRenderingContext.commit()")}}). Pour la prise en charge de l'API Canvas 2D par les employés, voir {{bug (801176)}}.

+ +

main.js (code du thread principal) :

+ +
var canevasHtml = document.getElementById("canevas");
+var horsEcran = canevasHtml.transferControlToOffscreen();
+
+var worker = new Worker("offscreencanvas.js");
+worker.postMessage({canvas: offscreen}, [offscreen]);
+
+ +

offscreencanvas.js (code worker) :

+ +
onmessage = function(evt) {
+  var canevas = evt.data.canvas.
+  var gl = canevas.getContext("webgl");
+
+  // ... un peu de dessin en utilisant le contexte gl ...
+
+  // Renvoyer les images dans l'HTMLCanvasElement original
+  gl.commit();
+};
+
+ +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.OffscreenCanvas")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf