Balise HTML <caption>

Définition et utilisation

<canvas> Les étiquettes sont généralement dessinées en temps réel par des scripts (généralement JavaScript).

<canvas> Les étiquettes sont transparentes, elles ne sont que des conteneurs de graphiques, et il faut utiliser des scripts pour dessiner des graphiques réellement.

dans les navigateurs désactivant JavaScript et ne prenant pas en charge <canvas> dans le navigateur, il affichera <canvas> Tous les textes à l'intérieur de l'élément.

Astuces

Apprenez-en davantage sur l'HTML Canvas dans notre <canvas> savoir plus sur l'élément.

Pour consulter la référence complète de toutes les propriétés et méthodes, veuillez visiter notre Manuel de référence des audio/video HTML.

Exemple

Exemple 1

Dessinez en temps réel un rectangle rouge et affichez-le dans l'élément <canvas> :

<canvas id="myCanvas">
Votre navigateur ne prend pas en charge le tag canvas.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

Essayez-le vous-même

Exemple 2

Un autre exemple de <canvas> :

<canvas id="myCanvas">
Votre navigateur ne prend pas en charge le tag canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// Ouvrir l'opacité
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

Essayez-le vous-même

Attribut

Attribut Valeur Description
height Valeur en pixels Définit la hauteur du canevas. La valeur par défaut est 150.
width Valeur en pixels Définit la largeur du canevas. La valeur par défaut est 300.

Attributs globaux

<canvas> Le tag prend également en charge Attributs globaux dans HTML.

Attributs d'événement

<canvas> Le tag prend également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <canvas> Élément :

canvas {
  height: 150px;
  width: 300px;
}

Essayez-le vous-même

Histoire de <canvas>

Ce élément HTML est conçu pour les graphiques vectoriels clients. Il n'a pas de comportement en lui-même, mais expose une API de dessin au JavaScript client pour permettre aux scripts de dessiner ce qu'ils veulent sur un canevas.

Le marqueur <canvas> a été introduit par Apple dans le navigateur Web Safari 1.3. La raison de cette extension fondamentale de HTML est que la capacité de dessin de HTML dans Safari est également utilisée par le composant Dashboard de Mac OS X, et Apple souhaite avoir un moyen de soutenir les graphiques scriptés dans Dashboard.

Firefox 1.5 et Opera 9 ont suivi l'exemple de Safari. Ces deux navigateurs supportent le marqueur <canvas>.

Nous pouvons même utiliser le marqueur <canvas> dans IE, et construire une compatibilité de canvas sur la base du support VML de IE en utilisant du code JavaScript open source (initié par Google). Voir également :http://excanvas.sourceforge.net/.

Les efforts de standardisation du <canvas> sont推进 par une association informelle de fabricants de navigateurs Web, et actuellement, le <canvas> est devenu un balise formelle du projet草案 HTML 5. Voir également :http://www.whatwg.org/specs/web-apps/current-work/

Les différences entre le marqueur <canvas>, SVG et VML

Une différence importante entre le marqueur <canvas>, SVG et VML est que <canvas> dispose d'une API de dessin basée sur JavaScript, tandis que SVG et VML utilisent un document XML pour décrire le dessin.

Ces deux méthodes sont équivalentes en termes de fonctionnalités, n'importe laquelle peut être simulée par l'autre. À première vue, elles sont très différentes, mais chacune a des points forts et des points faibles. Par exemple, les dessins SVG sont faciles à éditer, il suffit de supprimer les éléments de leur description.

Pour supprimer un élément d'un même graphique dans un marqueur <canvas>, il faut souvent effacer le dessin et le redessiner.

Comment utiliser le marqueur <canvas> pour dessiner

La plupart des API de dessin Canvas ne sont pas définies sur l'élément <canvas> lui-même, mais sur celui qui passe par le. la méthode getContext()un objet "environnement de dessin" obtenu.

L'API Canvas utilise également la syntaxe des chemins. Cependant, les chemins sont définis par une série d'appels de méthodes, plutôt que décrits comme des chaînes de caractères composées de lettres et de chiffres, par exemple en appelant les méthodes beginPath() et arc().

Une fois le chemin défini, d'autres méthodes telles que fill() opèrent sur ce chemin. Les différentes propriétés de l'environnement de dessin, telles que fillStyle, expliquent comment ces opérations sont utilisées.

Remarque :L'une des raisons pour lesquelles l'API Canvas est très compacte est qu'elle ne fournit aucune prise en charge pour le texte de dessin. Pour ajouter du texte à une image <canvas>, il faut soit le dessiner soi-même et le fusionner avec une image bitmap, soit utiliser la positionnement CSS au-dessus du <canvas> pour couvrir le texte HTML.

Prise en charge du navigateur

Les numéros dans le tableau indiquent la version du navigateur qui prend en charge le premier élément.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 2.0 3.1 9.0