HTML5, Internet, Web Design HTLM5 : Peindre avec Canvas
html5canvas

HTML5, Internet, Web Design

HTLM5 : Peindre avec Canvas

Dans le traitement de certains projets la balise < canvas > est utilisé : une spécification HTML5 qui permet de créer des graphismes scriptables, avec une bonne flexibilité dans la représentation des éléments graphiques.

Adrien, développeur Beler recommande cette technique aux décideurs confrontés à des choix stratégiques, pour des nouveaux projets Web contenant des indicateurs, statistiques, diagrammes, histogrammes, cartes, et toute représentation graphique demandant des informations en temps réel.

Quelques explications …

Pour peindre avec canvas, il suffit de placer l’élément sur la page et de peindre ce que l’on souhaite à l’aide de JScript. Sans canvas, il faut recourir à des astuces du langage CSS ou utiliser un plug-in tiers tel qu’une applet Flash ou Java.

Avantages:

■ représentation facile des objets graphiques
■ outils de dessin : rectangles, arcs, ellipses, trajectoires, tracé de lignes, courbes de Bézier et quadratiques
■ effets : ombres, gradients linéaires et radiaux, transparence alpha, composition d’images
■ transformations : mise à l’échelle, rotation, translation, matrice de transformation

et bien plus encore ….

■ très bonne visualisation sur PC, iPad et tout autre appareil qui dispose d’un navigateur respectant le standard HTML5
■ affichage facile des dessins (graphiques), sans plugins supplémentaires

Canvas propose une API simple, la possibilité de manipuler directement l’image et un affichage qui ne dépend que de l’exécution du JavaScript.

Il permet la représentation des graphiques, des éléments d’interface, et d’autres éléments graphiques personnalisés sur le client utilisé en mode immédiat, fournir une vue d’ensemble de l’élément en question.
L’affichage graphique en mode immédiat est un modèle appelé « fire and forget » qui affiche les graphiques directement à l’écran sans laisser de contexte par la suite sur ce qui a été effectué.
Contrairement au mode retenu, les graphiques affichés ne sont pas enregistrés. Le développeur doit invoquer à nouveau toutes les commandes de dessins requises pour décrire l’ensemble de la scène chaque fois qu’une nouvelle image est nécessaire, indépendamment des changements.

L’utilisation de canvas dépend aussi des connaissances du développeur, ses compétences ainsi que des ressources existantes.

Comme la performance est absolument essentielle pour des sites Web très fréquentés, en fonctions des objectifs, il est nécessaire d’interférer canvas avec d’autres technologies.
Par exemple, dans la rédaction des graphiques, si la taille de l’écran augmente, la qualité de l’objet Canvas tend à se dégrader, car un nombre plus important de pixels doit être dessiné. Le choix nous portera plus vers un scénario SVG.

En conclusion, canvas est une bonne alternative pour des applications graphiques web de taille moyenne, pour des représentations graphiques nécessitant des visualisations rapides de données en temps réel. Et comme l’accélération matérielle des navigateurs promet de belles réalisations toujours plus époustouflantes, canvas n’est pas figé et va encore évoluer pour être doté d’autres méthodes de dessin.

canvas

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Facebook
Google+
http://blog.beleringenierie.com/2014/04/16/htlm5-peindre-avec-canvas/">
Twitter