From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/html/element/canvas/index.html | 206 ++++++++++++++++++++++++++++ 1 file changed, 206 insertions(+) create mode 100644 files/fr/web/html/element/canvas/index.html (limited to 'files/fr/web/html/element/canvas') diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html new file mode 100644 index 0000000000..94ace3eeae --- /dev/null +++ b/files/fr/web/html/element/canvas/index.html @@ -0,0 +1,206 @@ +--- +title: ' : l''élément de canevas graphique' +slug: Web/HTML/Element/canvas +tags: + - Canvas + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element/canvas +--- +
{{HTMLRef}}
+ +

L'élément <canvas> permet de modifier une zone graphique via un script (habituellement en JavaScript ou grâce à WebGL). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.

+ +

Pour plus d'information sur l'élément <canvas>, voir la page sur canvas.

+ +

Attributs

+ +

Comme les autres éléments HTML, cet élément possède les attributs globaux.

+ +
+
{{htmlattrdef("height")}}
+
La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.
+
{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}
+
Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false})")}} à la place.
+
{{htmlattrdef("width")}}
+
La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.
+
+ +

Notes d'utilisation

+ +

Contenu alternatif

+ +

Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <canvas>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <canvas> et ceux pour lesquels JavaScript est désactivé.

+ +

Balise </canvas> obligatoire

+ +

À la différence de {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} doit être fermé avec la balise fermante </canvas>.

+ +

Dimensionnement du canevas : CSS ou HTML

+ +

On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.

+ +

Mieux vaut utiliser les attributs explicites width et height de l'élément en HTML (ou via du code JavaScript).

+ +

Taille maximale d'un canevas

+ +

La taille maximale d'un élément <canvas> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. Stack Overflow):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurHauteur maximaleLargeur maximaleAire maximale
Chrome32 767 pixels32 767 pixels268 435 456 pixels (soit 16 384 x 16 384)
Firefox32 767 pixels32 767 pixels472 907 776 pixels (soit 22 528 x 20 992)
Safari32 767 pixels32 767 pixels268 435 456 pixels (soit 16 384 x 16 384)
IE8 192 pixels8 192 pixels?
+ +
+

Note : Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.

+
+ +

Exemples

+ +

HTML

+ +

Le fragment de code suivant ajoute un élément canvas au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.

+ +
<canvas id="canvas" width="300" height="300">
+  Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;.
+</canvas>
+
+ +

JavaScript

+ +

On utilise également ce fragment de code JavaScript avec la méthode {{domxref("HTMLCanvasElement.getContext()")}} afin d'obtenir le contexte de dessin puis on dessine sur le canevas.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+ +

Gérer l'opacité

+ +

Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété alpha avec la valeur false.

+ +
var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d', {alpha: false});
+ +

Avant que cette option soit standard, on pouvait utiliser l'attribut HTML moz-opaque {{non-standard_inline}} {{deprecated_inline}} pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug {{bug(878155)}} pour suivre le retrait de cet attribut.

+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Accessibilité

+ +

Contenu alternatif

+ +

Seul, l'élément <canvas> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <canvas> pour produire un document accessible.

+ + + +

Résumé technique

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Catégories de contenuContenu de flux, contenu phrasé, contenu intégré, contenu tangible.
Contenu autoriséTransparent mais sans aucun descendant étant du contenu interactif à l'exception des éléments {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut checkbox, radio, ou button.
Omission de balises{{no_tag_omission}}
Parents autorisésTout contenu acceptant du contenu phrasé.
Rôles ARIA autorisésTous les rôles sont autorisés
Interface DOM{{domxref("HTMLCanvasElement")}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '<canvas>')}}{{Spec2('HTML5 W3C')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.elements.canvas")}}

+ +

Voir aussi

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