Canvas (balise html)

Canvas (balise html)

Canvas (balise html)

Page d'aide sur l'homonymie Pour les articles homonymes, voir Canvas.

La balise canvas est une extension non standard à la spécification HTML 4 qui permet d'effectuer des rendus dynamiques d'images bitmap via des scripts. Elle a déjà été implémentée dans certains navigateurs et fait partie de la future spécification HTML 5 qui est en cours de finalisation.

Introduite à l'origine par Apple pour être utilisé dans le composant WebKit pour Mac OS X, pour faire fonctionner des logiciels comme Dashboard et le navigateur Safari, elle a été par la suite adoptée par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera puis standardisée par le groupe de travail WHATWG comme une proposition à introduire dans la nouvelle génération des technologies web. Novell a développé une extension activant les XForms dans Internet Explorer[1] et offrant ainsi une prise en charge des fonctionnalités de Canvas.

Canvas se résume en une région de dessin dont la hauteur et la largeur sont définies dans du code HTML. Du code Javascript permet d'accéder à l'aire via une série complète de fonctions de dessins, similaires aux autres API 2D, bien que permettant de générer dynamiquement des graphismes. Certaines personnes ont anticipé cet emploi de Canvas en l'utilisant pour des graphiques, des animations et de la création d'images.

Sommaire

Réactions

Lors de son introduction, la balise canvas a été accueillie de manière mitigée par la communauté des normes web. Certains se sont plaint de la décision d'Apple d'introduire cette balise propriétaire au lieu de supporter SVG, qui n'est pas encore complètement accepté sur le web. D'autres ont argumenté contre la logique même de la conception de canvas : étant complètement procédurale et n'ayant pas de contrepartie descriptive permettant à canvas de 'peindre', mais de dessiner des éléments ne sont pas identifiables dans une vision à la DOM. D'autres personnes ont soulevé le point que, non seulement c'est du propriétaire, mais aussi en rapport à la syntaxe proposé pour ses éléments. Par exemple, l'absence d'indication d'un namespace est[2] indésirable.

Un développeur web insatisfait par le niveau de support du format SVG dans Safari a été obligé de développer un traducteur du SVG Tiny 1.2 vers le canvas en Javascript, comme une preuve de concept contre les remarques qui disaient qu'il était plus facile d'ajouter canvas à Safari que la totalité de SVG[3].

Notes

Exemples

  • Canvascape - Un jeu 3D créé via Canvas.
  • WebMegaPong - Un clone avancé du célèbre Pong créé via Canvas.
  • Fractals - Des rendus fractals plus complexes
  • CanvasPaint - Un clone du logiciel Paint
  • Frames - Traçage de bordures décoratives autour des balises HTML standards
  • Tucanos - La démo "Tucanos"
  • Free drawing - Un exemple d'outil de dessin.
  • Cake - Un graphe de scene en javascript reposant sur Canvas.

Voir aussi

Articles connexes

Liens externes

  • Portail de l’informatique Portail de l’informatique
Ce document provient de « Canvas (balise html) ».

Wikimedia Foundation. 2010.

Contenu soumis à la licence CC-BY-SA. Source : Article Canvas (balise html) de Wikipédia en français (auteurs)

Игры ⚽ Поможем сделать НИР

Regardez d'autres dictionnaires:

  • Canvas (Balise Html) — Pour les articles homonymes, voir Canvas. La balise canvas est une extension non standard à la spécification HTML 4 qui permet d effectuer des rendus dynamiques d images bitmap via des scripts. Elle a déjà été implémentée dans certains… …   Wikipédia en Français

  • HTML 5 — HTML (HyperText Markup Language) Extension de fichier HTML5: .html, .htm XHTML5: .xhtml, .xht, .xml Type MIME HTML5: text/html XHTML5: application/xhtml+xml, application/xml Développé par W3C Type de format Hypertexte …   Wikipédia en Français

  • Canvas — Cette page d’homonymie répertorie les différents sujets et articles partageant un même nom. Sur les autres projets Wikimedia : « Canvas », sur le Wiktionnaire (dictionnaire universel) Canvas est un terme désignant l objet d… …   Wikipédia en Français

  • Canvas (HTML) — Pour les articles homonymes, voir Canvas. L élément canvas est un composant de HTML qui permet d effectuer des rendus dynamiques d images bitmap via des scripts. Déjà implémenté dans certains navigateurs, il fait partie de la future spécification …   Wikipédia en Français

  • Liste de bibliothèques de tracé d'éléments 2D — Les bibliothèques d affichage 2D se classent en deux familles: bitmap et vectorielle (ces dernières permettent généralement l affichage d images bitmap). Les bibliothèques d affichage 2D servent souvent de fondement pour les bibliothèques d… …   Wikipédia en Français

  • HTML5 — Extension HTML5: .html, .htm XHTML5: .xhtml, .xht, .xml Type MIME HTML5: text/html XHTML5: application/xhtml+xml, application/xml Dévelo …   Wikipédia en Français

  • Mozilla application framework — Plateforme Mozilla La plateforme Mozilla (XPFE ou XPToolkit ou Mozilla application framework) est l ensemble des techniques Mozilla. Cela inclut le moteur de rendu Gecko, XUL, XHTML, SVG, le moteur javascript, le toolkit et toutes les API… …   Wikipédia en Français

  • Plateforme Mozilla — La plateforme Mozilla (XPFE ou XPToolkit ou Mozilla application framework) est l ensemble des techniques Mozilla. Cela inclut le moteur de rendu Gecko, XUL, XHTML, SVG, le moteur javascript, le toolkit et toutes les API communes disponibles aux… …   Wikipédia en Français

  • XPFE — Plateforme Mozilla La plateforme Mozilla (XPFE ou XPToolkit ou Mozilla application framework) est l ensemble des techniques Mozilla. Cela inclut le moteur de rendu Gecko, XUL, XHTML, SVG, le moteur javascript, le toolkit et toutes les API… …   Wikipédia en Français

  • Plate-forme Mozilla — Pour les articles homonymes, voir Plate forme. La plate forme Mozilla (XPFE ou XPToolkit ou Mozilla application framework) est l’ensemble des techniques Mozilla. Cela inclut le moteur de rendu Gecko, XUL, XHTML, SVG, le moteur JavaScript, le… …   Wikipédia en Français

Share the article and excerpts

Direct link
Do a right-click on the link above
and select “Copy Link”