Tag HTML <canvas>
Le tag <canvas> (ce qui se traduit comme “toile”) crée un domaine sur page web, où on peut créer des objets, des images et des animations, des photo compositions différents à l'aide de scripts de Javascript. Tag a apparu dans la cinquième version de HTML.
En travaillant avec canvas c'est important de différencier des concepts tels qu’un élément canvas et le contexte d’ élément, car ils sont souvent confus. L’élément canvas est ce qui est intégré dans HTML (noeud DOM), et le contexte canvas est un objet avec ses méthodes et particularités de la visualisation. Le context peut être 2D et 3D. L’élément canvas peut avoir un context seulement.
Syntaxe
Le tag <canvas> est apparié, son contenu est écrit entre le tag ouvrant (<canvas>) et le tag fermant (</canvas>).
Exemple
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Votre navigateur ne supporte pas HTML5 élément canvas.</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#ff9311';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Résultat
Exemple
<!DOCTYPE HTML>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Example !', 50, 100);
</script>
</body>
</html>Résultat
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| height | pixels | Indique la hauteur d’un élément en pixels. Valeur par défaut - "150". |
| width | pixels | Indique la largeur d’un élément en pixels. Valeur par défaut - "300". |
Le tag <canvas> supporte les Attributs globaux et les Attributs d'événements.
Support de Navigateurs
|
|
|
|
|---|---|---|---|
| 4+ | 2+ | 3.1+ | 9+ |
Pratiquez vos connaissances
