Canvas - Le graphisme dans un navigateur
La balise Canvas est définie dans le nouveau format de pages HTML 5, et elle déjà implémentée sur la plupart des navigateurs.
Cette nouvelle balise permet d'afficher du graphisme en 2D dans le navigateur et ainsi faire de celui-ci une plateforme d'applications web riches.
La balise n'a que deux attributs: width et height (largeur et hauteur), outre les attributs génériques comme id, name, class... Son but est de marquer l'emplacement où l'on veut insérer une surface de dessin (techniquement appellée "contexte de rendu").
Le corps de la balise n'est pas affiché par les navigateurs qui implémentent Canvas mais seulement par les autres, et constitue donc un moyen de fournir un contenu alternatif.
Utiliser Canvas est très simple, le code ci-dessous montre une application minimale:
<canvas id="c1" width="400" height="100">
Non implémenté.
Cela a défini un emplacement et son identifieur, reste à ajouter un contenu graphique:
var canvas = document.getElementById(c1);
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
ctx.fillRect(100,0,80,80); // afficher un rectangle plein
}
Pour démarrer le script on peut utiliser l'évènement onload associée à la balise <bodt; ou à l'élément window. Dans la démo on crée la fonction canvasFun() et on l'assigne à onload:
window.onload.canvasFun;
Nous allons étudier dans les prochains articles les méthodes graphiques et leur utilisation.
Compatibilité
Canvas fonctionne actuellement sur:
- Firefox.
- Safari.
- Chrome.
- Opera.
Pas sur Internet Explorer. Cette compatibilité limitée le destine plutôt aux applications Web, et si on l'utilise pour les pages de sites, il faut que le contenu de la balise fournisse une fonctionnalité de remplacement suffisante. Cela concerne aussi les utilisateurs qui désactivent JavaScript.
Pourra-t-on voir un jour Canvas implémenté sur Internet Explorer, l'article Canvas sous Internet Explorer donne une réponse.
Démonstration
Canvas et Silverlight
Le fonctionnement général de Canvas est proche de celui de Silverlight. Cependant Silverlight permet de définir une interface graphique en langage XAML.
Donc Canvas est plus simple d'emploi que Silverlight, mais moins complet a moins de l'utiliser en combinaison avec XUL.
0 commentaires:
Enregistrer un commentaire
Blogpourquoifaire