From 1407c8fdef01ecd0ffb8a8bd46e7113f119b9fde Mon Sep 17 00:00:00 2001 From: julieng Date: Sat, 2 Oct 2021 17:20:24 +0200 Subject: convert content to md --- files/fr/web/api/offscreencanvas/index.md | 148 +++++++++++++----------------- 1 file changed, 66 insertions(+), 82 deletions(-) (limited to 'files/fr/web/api/offscreencanvas') diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md index fa540f07d4..8dba3f4dc7 100644 --- a/files/fr/web/api/offscreencanvas/index.md +++ b/files/fr/web/api/offscreencanvas/index.md @@ -9,63 +9,58 @@ tags: - Reference translation_of: Web/API/OffscreenCanvas --- -
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+{{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.

+L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). -
-

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.

-
+> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. -

Constructeur

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

Propriétés

+## Propriétés -
-
{{domxref("OffscreenCanvas.height")}}
-
La hauteur du canevas hors écran.
-
{{domxref("OffscreenCanvas.width")}}
-
La largeur du canevas hors écran.
-
+- {{domxref("OffscreenCanvas.height")}} + - : La hauteur du canevas hors écran. +- {{domxref("OffscreenCanvas.width")}} + - : La largeur du canevas hors écran. -

Méthodes

+## Méthodes -
-
{{domxref("OffscreenCanvas.getContext()")}}
-
Retourne un contexte de rendu pour le canevas hors écran.
-
+- {{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.
-
+- {{domxref("OffscreenCanvas.toBlob()")}} + - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. -

Exemples

+ -

Affichage synchrone d'images produites par un OffscreenCanvas

+- {{domxref("OffscreenCanvas.transferToImageBitmap()")}} + - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `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.

+## Exemples -

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.

+### Affichage synchrone d'images produites par un `OffscreenCanvas` -

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

+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. -
<canvas id="une"></canvas>
-<canvas id="deux"></canvas>
+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`. -

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

+Étant donnés ces deux éléments {{HTMLElement("canvas")}} : -
var une = document.getElementById("une").getContext("bitmaprenderer");
+```html
+
+
+```
+
+le code suivant fournira la restitution, en utilisant un `OffscreenCanvas` comme décrit ci-dessus.
+
+```js
+var une = document.getElementById("une").getContext("bitmaprenderer");
 var deux = document.getElementById("deux").getContext("bitmaprenderer");
 
 var horsEcran = new OffscreenCanvas(256, 256);
@@ -82,28 +77,30 @@ une.transferImageBitmap(bitmapUne);
 // Exécuter la restitution pour le second canevas
 var bitmapDeux = horsEcran.transferToImageBitmap();
 deux.transferImageBitmap(bitmapDeux);
-
+``` -

Affichage asynchrone d'images produites par un OffscreenCanvas

+### 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.

+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.

+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)}}.

+Notez que dans Firefox, cette API n'est actuellement implémentée que pour le [contexte WebGL](/fr-FR/docs/Web/API/WebGL_API) ({{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) :

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

offscreencanvas.js (code worker) :

+offscreencanvas.js (code worker) : -
onmessage = function(evt) {
+```js
+onmessage = function(evt) {
   var canevas = evt.data.canvas.
   var gl = canevas.getContext("webgl");
 
@@ -112,36 +109,23 @@ worker.postMessage({canvas: offscreen}, [offscreen]);
   // 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

- - +``` + +## Spécifications + +| Spécification | Statut | Commentaire | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | +| {{SpecName('HTML WHATWG', "scripting.html#the-offscreencanvas-interface", "OffscreenCanvas")}} | {{Spec2('HTML WHATWG')}} |   | + +## Compatibilité des navigateurs + +{{Compat("api.OffscreenCanvas")}} + +## Voir aussi + +- [WebGL Off the Main Thread – Mozilla Hacks](https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/) +- {{domxref("CanvasRenderingContext2D")}} +- {{domxref("ImageBitmap")}} +- {{domxref("ImageBitmapRenderingContext")}} +- {{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} +- {{domxref("WebGLRenderingContext.commit()")}} -- cgit v1.2.3-54-g00ecf