OUJOOD.COM
Définition et utilisation balise <canvas>
LES BALISES HTMLLa balise <canvas> est utilisée pour dessiner des graphiques, à la volée, via script (habituellement en JavaScript).
La balise <canvas> est juste un container pour les graphiques, vous devez utiliser un script pour réellement dessiner les graphiques.
L'élément canvas représente une toile bitmap dépendante de la résolution, qui peut être utilisé pour le rendu dynamique d'images telles que des graphiques, d'autres images.
Un élément canvas doit avoir à la fois une balise de début <canvas> et une balise de fin </canvas>.
Voir notre tutorial pour plus de details sur comment mettre en œuvre l'élément <canvas >
Exemple Dessiner un carré rouge, à la volée et l’afficher à l'intérieur de l'élément <canvas> :
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>html5 demo</title>
</head>
<body>
<canvas id="myCanvas">Votre navigateur ne prend pas en charge la balise
canvas.</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>
Appui de navigateur
La balise <canvas> est pris en charge dans Internet Explorer 9, Firefox, Opera, Chrome et Safari.
Remarque : Internet Explorer 8 et versions antérieures, ne supportent pas la balise <canvas> .
Différences entre HTML 4.01 et HTML5
La balise <canvas> est nouveau en HTML5.
Astuces et conseils
Remarque : Tout texte dans l'élément <canvas> s'affichera dans les navigateurs qui ne prennent pas en charge la balise <canvas> .
Ses attributs
Nouveau : Nouveau té HTML5.
| Attribut |
Valeur |
Description |
|---|---|---|
| height Nouveau |
pixels |
Spécifie la hauteur du canvas |
| width Nouveau |
pixels |
Spécifie la largeur du canvas |
Attributs globaux
La balise <canvas> prend également en charge les HTML attributs globaux.
Attributs d'événement
La balise <canvas> prend également en charge les Attributs de l'événement au format HTML.
Retour à l'accueil du site
Par carabde 10 mars 2014