oujood.com

  HTML La balise <canvas>

La balise <canvas> est utilisée pour dessiner des graphiques, à la volée, via script (habituellement en JavaScript).

chercher |

Définition et utilisation balise <canvas>

LES BALISES HTML

La 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

Internet Explorer Firefox Opera Google Chrome Safari

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



Voir aussi nos tutoriel :

Balise menu

Définit une liste / menu de commandes

SVG Dégradés de couleurs

SVG Dégradés de couleurs

Supprimer des enregistrements

Base de données MySQL DELETE