Graphismes HTML5 grâce à Canvas & SVG

David Catuhe & David RoussetRelation avec les développeursMicrosoft France

@davrous @deltakoshhttp://blogs.msdn.com/davrous http://blogs.msdn.com/eternalcoding

SEMANTICS CONNECTIVITY 3D, GRAPHICS& EFFECTS

OFFLINE& STORAGE

DEVICE ACCESS MULTIMEDIA PERFORMANCE& INTEGRATION

CSS3

SEMANTICS CONNECTIVITY 3D, GRAPHICS& EFFECTS

OFFLINE& STORAGE

DEVICE ACCESS MULTIMEDIA PERFORMANCE& INTEGRATION

CSS3

Agenda

Les bases de Canvas & SVG

Quand utiliser <canvas> ou SVG: les scénarios

L’outillage

Pour finir la journée de bonne humeur: du jeu !

Peu de slides et beaucoup de demos!

SVG

Les bases de SVG

Pour dessiner en 2D vectorielle via XML

“retained mode” : l’arbre des objets conservé en mémoire

Accès aux éléments SVG via le DOM

Les éléments SVG peuvent être stylés par CSS & décoré avec ARIA

Chargé depuis un fichier .svg ou en ligne dans un document HTML5

Scalable Vector Graphics

HTML5 <svg>

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /></svg>

Jetons un œil à un exemple tout simple

Les bases de SVGSVG 1.1 2nd

Edition dans IE9 et IE10

Fonctionnalité SVG IE9 IE10

Document Structure

Basic Shapes

Paths

Text

Transforms

Painting, Filling, Color

Scripting

Styling

Gradients and Patterns

Clipping and Masking

Markers and Symbols

Filter Effects

Declarative Animation

SVG Fonts

Les bases de SVG

Quelques éléments, un peu de style et d’interactivité

demo

Canvas

Les bases de Canvas

Vous permet de dessiner dans une bitmapVoyez le comme une BMP dynamique ;-)

Un jeu d’APIs JavaScript et de primitives de dessinRectangles, lignes, courbes de Bezier, etc.

Mot immédiat : « Fire and Forget »A vous de maintenir votre arbre d’objets

C’est une boîte noire : contenu non visible dans le DOM

Attention aux problèmes d’accessibilité !

Une surface de pixels dynamique contrôlée par JS

HTML5 <canvas>

<canvas id="myCanvas" width="200" height="200"> Votre navigateur ne supporte pas l’élément canvas, désolé.</canvas>

<script type="text/javascript"> var example = document.getElementById("myCanvas"); var context = example.getContext("2d"); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); </script>

Jetons un œil à un exemple tout simple

Les bases de Canvas

L’élément, un peu d’intéractivité & IE Test Drive Canvas Pad

demo

Comment faire son choix ?

Quelques scénarios clés pour SVG en action

Documents complexes, Animation, Rapports & Accessibilité

demo

SVG : les scénarios clésDocuments vectoriels « complexes »Graphiques / Rapports / Cartographie

Soulage le serveur pour la production de graphismes haute qualité Interactivité possible et mise à jour des données via Ajax

Utilisation plus génériqueCSS ou images de fondPosters (excellent pour l’impression)Animation avec JavaScript

Jeux vidéoMeilleur SEO & Accessibilité (couplage avec ARIA)

Quelques scénarios clés pour Canvas en action

Raytracer, manipulation vidéo, rapports plus “complexes”

demo

Canvas : les scénarios clésManipulation des pixels

RayTracing, traitement d’images

Affichage de données en temps réelScènes complexes, animations mathématiques (météo, etc.)

Remplacement de pixelsA vous les effets d’écran bleu/vert à la StarWars !

Jeux vidéo

SVG vs CanvasLes choix les plus simples

Combinaison/Scénarios de recouvrement

Rapports et Graphiques interactifsSVG meilleur pour l’interaction, chargement XML & l’impressionCanvas peut être un choix plus rapide pour certains navigateurs

Jeux Vidéo 2DCanvas propose une expérience connue aux développeurs de jeux (APIs bas niveau, mode immédiat comme XNA, etc.)SVG : beaucoup d’opérations DOM & coût mémoire supérieur

Des différences plus subtiles

L’outillage

Outils pour générer du SVG

Microsoft VisioExport as SVG

Adobe IllustratorSave as SVG

InkspaceLogiciel gratuit Open Source

SVG EditLogiciel en ligne

Vous ne serez pas obligé de taper du SVG dans Notepad!

Outils pour générer du Canvas

AI2Canvas plug-in : http://visitmix.com/labs/ai2canvas/

Exporte les conceptions vectorielles et bitmap vers HTML5 canvas

Fournit un moyen de décrire les animations

Vous ne serez pas obligé de taper les primitives JS non plus ;-)

Regardons un peu l’outillage en action

SVG Edit

demo

Allez, maintenant, du fun !

1ère étape : un jeu simple !

Conception du même jeu HTML5

Comparons SVG & Canvas dans ce scénario

demo

Comparaison de performancesLa dernière étape pour vous aider à choisir

Comparaison performance Canvas vs SVG

Tous les navigateurs ne sont pas forcément égaux

demo

Revue de jeux plus complexes

BrikBrok

Un jeu de casse-brique utilisant de la composition SVG/Canvas

demo

HTML5 Platformer

Un jeu de plateforme utilisant EaselJS

demo

RessourcesIntroduction aux APIs graphiques d’HTML5: SVG & Canvas

http://blogs.msdn.com/davrous/archive/2011/05/09/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-1-4.aspx

HTML5 Platformer: portage complet du jeu XNA vers <canvas> grâce à EaselJS

http://blogs.msdn.com/davrous/archive/2011/09/09/html5-platformer-portage-complet-du-jeu-xna-vers-lt-canvas-gt-gr-226-ce-224-easeljs.aspx

Bolas Lenses : un développement HTML5 Canvas & JavaScript

http://blogs.msdn.com/eternalcoding/archive/2011/07/13/retours-sur-un-d-233-veloppement-html5-amp-javascript.aspx

Développer un jeu de casse-briques avec Canvas et SVG

http://blogs.msdn.com/b/eternalcoding/archive/2011/09/02/cahier-de-vacances-html-5-d-233-velopper-son-propre-jeu-de-casse-briques-en-html-5-avec-canvas-et-svg.aspx

questions?

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION

IN THIS PRESENTATION.