HTML La balise <canvas>

Somaire

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> :

Sélectionner 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

  • Trafic Booster
    hebergement web

    SCREEBER - Logiciel de copywriting

    SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


    HTML5, CSS3, JavaScript pour débutants Tome 1
    HTML5, CSS3, JavaScript
    pour débutants Tome 1

    Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

    Regarder aussi nos cours :

    fonction strrpos, strrpos

    Trouve la position de la dernière occurrence d'une sous- chaîne dans une chaîne

    :link

    Ajoute un style à un lien non visité

    :first-letter

    Ajoute un style pour le premier caractère d'un texte



    Rentabilisez efficacement votre site