Canvas (HTML)

Canvas (HTML)
Page d'aide sur l'homonymie 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 HTML5 qui est en cours de finalisation.

Sommaire

Historique

Introduit à l'origine par Apple pour être utilisé dans WebKit pour des logiciels comme Dashboard et le navigateur Safari, canvas a été par la suite adopté par les navigateurs utilisant Gecko (notamment Mozilla Firefox) et Opera, avant d'être standardisé par le groupe de travail WHATWG. Novell a développé une extension activant les XForms dans Internet Explorer[1] offrant ainsi une prise en charge des fonctionnalités de canvas.

Fonctionnement

canvas se résume en une zone 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.

Exemple

Ce code crée une zone de dessin sur une page HTML :

<canvas id="exemple" width="200" height="200">
  Affichage d'un texte pour les navigateurs qui ne supportent pas canvas.
</canvas>

Avec JavaScript, il est ensuite possible de dessiner dans la zone :

<script type="text/javascript">
  var exemple = document.getElementById('exemple');
  var contexte = exemple.getContext('2d');
  contexte.fillStyle = "rgba(0,0,255,0.5)";
  contexte.fillRect(30, 30, 50, 50);
</script>

Ce code dessine à l'écran un rectangle semi-transparent bleu.

Réactions

Lors de son introduction, canvas a été accueilli de manière mitigée par la communauté des normes web[réf. nécessaire]. 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[réf. nécessaire]. 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. Enfin, l'absence d'indication d'un namespace est indésirable[2].

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 critiques qui disaient qu'il était plus facile d'ajouter canvas à Safari que la totalité de SVG[3].

Notes

Voir aussi

Articles connexes

Liens externes


Wikimedia Foundation. 2010.

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

Игры ⚽ Нужен реферат?

Regardez d'autres dictionnaires:

  • Canvas (HTML element) — The canvas element is part of HTML5 and allows for dynamic scriptable rendering of bitmap images.It was initially introduced by Apple for use inside their own Mac OS X WebKit component, powering applications like Dashboard widgets and the Safari… …   Wikipedia

  • Canvas (HTML) —     HTML HTML и HTML5 Динамический HTML …   Википедия

  • Canvas (HTML-Element) — Das Canvas Element ist Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Bitmap Grafiken. Ursprünglich von Apple als Bestandteil des Webkit entwickelt, ist es später von der WHATWG standardisiert worden. Canvas umfasst einen in HTML …   Deutsch Wikipedia

  • Canvas (disambiguation) — Canvas is a heavy duty fabric.Canvas may also refer to: *Canvas (band), a rock band from Austin, Texas * Canvas (film), a film starring Joe Pantoliano and Marcia Gay Harden *Canvassing, an election technique *Canvas (HTML element) is an extension …   Wikipedia

  • Canvas — (deutsch „Leinwand“, „Leinen“) bezeichnet: Canvas (Fernsehsender), ein Fernsehprogramm des Flämischen Rundfunks VRT Canvas (HTML Element), Element der Auszeichnungssprache HTML Leinwand, ein Gewebe, das in der Malerei als Farbträger dient …   Deutsch Wikipedia

  • 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

  • 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

  • Canvas — Saltar a navegación, búsqueda Canvas es una etiqueta o elemento en HTML que permite la generación de graficos en forma dinámica por medio de programación dentro de una pagina. Inicialmente lo implementó Apple para Safari. Luego fue adoptado por… …   Wikipedia Español

  • HTML 5 — ist die noch nicht erschienene Weiterentwicklung der Auszeichnungssprache HTML (aktuell: Version 4.01). Inhaltsverzeichnis 1 Entstehung 2 Ziele 3 Aufbau 3.1 HTML 5 3.2 XHTML 5 3 …   Deutsch Wikipedia

  • HTML — Расширение .html, .htm MIME text/html Ра …   Википедия

Share the article and excerpts

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