Si vous voyez cette animation c'est aucun doute que vous disposez d'un navigateur moderne.
Attention j'ai dis « moderne » et non « récent ». On peut être jeune et vieux à la fois et inversement comme votre serviteur.
• • •Mais si l'animation ne s'anime pas est-ce pour autant une image fixe ?
Oui. Et c'est sans doute de votre faute : vous disposez d'Internet Explorer.
Ce qui est bien avec Microsoft c'est qu'on est jamais surpris : on est toujours déçu.
Certes, avec IE 8, Microsoft a fait un petit pas vers le respect des standards Web. Je ne vais pas faire l'inventaire des technologies dont sont privés ses utilisateurs. Canvas en est un exemple.
Cette technologie Web permet d'effectuer des rendus dynamiques d'images bitmap via des scripts (dixit Wikipédia).
Conçue par Apple, elle est intégrée au moteur de rendu WebKit. Mozilla l'a également adoptée avec Gecko, sans oublier Opera et son Presto. Safari, Firefox et Opera supportent donc nativement Canvas.
Ce qui n'est pas le cas avec IE. Illustration :
La première image est une illustration en PNG.
La seconde est traçée depuis cette source par Canvas...
Ceci est un chat PNG ↶
Ceci est un chat CANVAS ↶
Les utilisateurs d'IE ne la verront pas mais auront droit à une paire de chatons en JPG.
Heureusement, Google, dans sa grande bonté, apporte la technologie Canvas au navigateur de Microsoft avec le script ExplorerCanvas que les webmestres pourront trouver ici, mais pas chez moi.
Lien
- Tout cela bien sûr sort du livre de Mark « la tronche » Pilgrim : HTML5 et de ce « chat-pitre » sur Canvas.
Canvas : une nouvelle animation
Le code et moi : je suis de ceux qui bidouillent le code sans trop comprendre ce qu'ils font. Bref après 2 heures je comprends que je n'y comprends pas grand chose.
Si J'ai réussi à régler le problème du chat canvas ce ne fut pas sans mal. Mais avoir 2 appels windows onload c'était trop pour ma page : l'animation ne se chargeait pas, ou bien elle apparaissait à la place du chat png.
J'ai blousé finalement en mettant une autre animation Canvas dans une page seule que j'appelle dans un iframe.
Quel métier que codeur. Je sens que je vais me mettre à la peinture.
Commentaires :
Comment Canvas arrive à le dessiner ?
Canvas et le tracé d'images Bitmap
En triturant ce weekend mes scripts JS j'ai bousillé la démo :
window.onload = function() qui est appelé pour dessiner le chat doit être en conflit avec des fonctions que j'ai nettoyé.
Je reverrai cela un weekend prochain.
Toutes mes excuses.