SlideShare ist ein Scribd-Unternehmen logo
1 von 35
http://blogs.msdn.com/davrous
http://blogs.msdn.com/eternalcoding
Peu de slides et beaucoup de demos!
SVG
Scalable Vector Graphics
Jetons un œil à un exemple tout simple
 <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>
Fonctionnalité SVG         IE9   IE10


SVG 1.1 2nd Edition   Document Structure               


 dans IE9 et IE10     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
Canvas
Une surface de pixels dynamique contrôlée par JS
Jetons un œil à un exemple tout simple
 <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>
Comment faire son choix ?
Les choix les plus simples
Des différences plus subtiles
L’outillage
Vous ne serez pas obligé de taper du SVG dans Notepad!
Vous ne serez pas obligé de taper les primitives JS non plus ;-)

http://visitmix.com/labs/ai2canvas/
Allez, maintenant, du fun !
1ère étape : un jeu simple !
La dernière étape pour vous aider à choisir
Revue de jeux plus complexes
http://blogs.msdn.com/davrous/archive/2011/05/09/introduction-aux-apis-
graphiques-d-html5-svg-amp-canvas-1-4.aspx



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


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


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?
AMDEV: Graphismes avec html5 grâce à canvas et svg

Weitere ähnliche Inhalte

Andere mochten auch

Ensayo filosofia
Ensayo filosofiaEnsayo filosofia
Ensayo filosofiaUSET
 
Gestión de Equipos en Movilidad
Gestión de Equipos en MovilidadGestión de Equipos en Movilidad
Gestión de Equipos en MovilidadMarcelo Manta
 
Actividades tercer trimestre
Actividades tercer trimestreActividades tercer trimestre
Actividades tercer trimestrelgonzalezcabrera
 
Internship at IRCAD, Finale Report Presentation
Internship at IRCAD, Finale Report PresentationInternship at IRCAD, Finale Report Presentation
Internship at IRCAD, Finale Report PresentationRaphaël Bils
 
U1 tema 4 teoría del conocimiento
U1   tema 4 teoría del conocimientoU1   tema 4 teoría del conocimiento
U1 tema 4 teoría del conocimientoJean Vaudenay
 
catalogue de l'Exposition Helico de Laurent Valere
catalogue de l'Exposition Helico de Laurent Valerecatalogue de l'Exposition Helico de Laurent Valere
catalogue de l'Exposition Helico de Laurent ValereFondationClement
 
Tpe PréSentation Faq+DéF
Tpe PréSentation Faq+DéFTpe PréSentation Faq+DéF
Tpe PréSentation Faq+DéFCHRIS
 
Zaruma Patrimonio Cultural Del Ecuador
Zaruma Patrimonio Cultural Del EcuadorZaruma Patrimonio Cultural Del Ecuador
Zaruma Patrimonio Cultural Del Ecuadorivette
 
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11CRIJ Occitanie - site Toulouse
 
Arbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQLArbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQLLenz Grimmer
 
Presentacion con fotos 2010 segunda
Presentacion  con fotos 2010 segundaPresentacion  con fotos 2010 segunda
Presentacion con fotos 2010 segundaDP Málaga
 
Online Learning - MOOCs
Online Learning - MOOCsOnline Learning - MOOCs
Online Learning - MOOCsAnita Holdener
 
Présentation Facebook Developer Garage Toulouse - Facebook like
Présentation Facebook Developer Garage Toulouse - Facebook likePrésentation Facebook Developer Garage Toulouse - Facebook like
Présentation Facebook Developer Garage Toulouse - Facebook likeX-PRIME GROUPE
 
11 Rezepte für Foursquare
11 Rezepte für Foursquare11 Rezepte für Foursquare
11 Rezepte für Foursquareelbdudler
 
Massive Impact - Wie Social Media die Welt verändert
Massive Impact - Wie Social Media die Welt verändertMassive Impact - Wie Social Media die Welt verändert
Massive Impact - Wie Social Media die Welt verändertAndreas Dittes
 
C O M P U T A C I O N M O V I L I N A L A M B R I C A
C O M P U T A C I O N  M O V I L  I N A L A M B R I C AC O M P U T A C I O N  M O V I L  I N A L A M B R I C A
C O M P U T A C I O N M O V I L I N A L A M B R I C AKaterine Santander
 

Andere mochten auch (20)

Ensayo filosofia
Ensayo filosofiaEnsayo filosofia
Ensayo filosofia
 
Gestión de Equipos en Movilidad
Gestión de Equipos en MovilidadGestión de Equipos en Movilidad
Gestión de Equipos en Movilidad
 
Actividades tercer trimestre
Actividades tercer trimestreActividades tercer trimestre
Actividades tercer trimestre
 
Internship at IRCAD, Finale Report Presentation
Internship at IRCAD, Finale Report PresentationInternship at IRCAD, Finale Report Presentation
Internship at IRCAD, Finale Report Presentation
 
U1 tema 4 teoría del conocimiento
U1   tema 4 teoría del conocimientoU1   tema 4 teoría del conocimiento
U1 tema 4 teoría del conocimiento
 
CV
CVCV
CV
 
catalogue de l'Exposition Helico de Laurent Valere
catalogue de l'Exposition Helico de Laurent Valerecatalogue de l'Exposition Helico de Laurent Valere
catalogue de l'Exposition Helico de Laurent Valere
 
Tpe PréSentation Faq+DéF
Tpe PréSentation Faq+DéFTpe PréSentation Faq+DéF
Tpe PréSentation Faq+DéF
 
Zaruma Patrimonio Cultural Del Ecuador
Zaruma Patrimonio Cultural Del EcuadorZaruma Patrimonio Cultural Del Ecuador
Zaruma Patrimonio Cultural Del Ecuador
 
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11
ARDESI : Les Midi-Pyrénéens et la Société de l’Information 24-11-11
 
Arbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQLArbeiten in einer virtuellen Firma - MySQL
Arbeiten in einer virtuellen Firma - MySQL
 
Presentacion con fotos 2010 segunda
Presentacion  con fotos 2010 segundaPresentacion  con fotos 2010 segunda
Presentacion con fotos 2010 segunda
 
Online Learning - MOOCs
Online Learning - MOOCsOnline Learning - MOOCs
Online Learning - MOOCs
 
Test accueil1
Test accueil1Test accueil1
Test accueil1
 
Planeacion
PlaneacionPlaneacion
Planeacion
 
Présentation Facebook Developer Garage Toulouse - Facebook like
Présentation Facebook Developer Garage Toulouse - Facebook likePrésentation Facebook Developer Garage Toulouse - Facebook like
Présentation Facebook Developer Garage Toulouse - Facebook like
 
11 Rezepte für Foursquare
11 Rezepte für Foursquare11 Rezepte für Foursquare
11 Rezepte für Foursquare
 
Massive Impact - Wie Social Media die Welt verändert
Massive Impact - Wie Social Media die Welt verändertMassive Impact - Wie Social Media die Welt verändert
Massive Impact - Wie Social Media die Welt verändert
 
C O M P U T A C I O N M O V I L I N A L A M B R I C A
C O M P U T A C I O N  M O V I L  I N A L A M B R I C AC O M P U T A C I O N  M O V I L  I N A L A M B R I C A
C O M P U T A C I O N M O V I L I N A L A M B R I C A
 
Oktoberfest Amusement Rides
Oktoberfest Amusement RidesOktoberfest Amusement Rides
Oktoberfest Amusement Rides
 

Mehr von davrous

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016davrous
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audiodavrous
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoftdavrous
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsdavrous
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSdavrous
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Parisdavrous
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Sourcedavrous
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGLdavrous
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsdavrous
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsdavrous
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5davrous
 
Pointer events
Pointer eventsPointer events
Pointer eventsdavrous
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8davrous
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3davrous
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockagedavrous
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10davrous
 

Mehr von davrous (20)

Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016Building a cross platforms tower defense game Dev Days 2016
Building a cross platforms tower defense game Dev Days 2016
 
Create fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audioCreate fun & immersive audio experiences with web audio
Create fun & immersive audio experiences with web audio
 
Nouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde MicrosoftNouveautés JavaScript dans le monde Microsoft
Nouveautés JavaScript dans le monde Microsoft
 
Unleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.jsUnleashing WebGL & WebAudio with babylon.js
Unleashing WebGL & WebAudio with babylon.js
 
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esCreating 3D Worlds with WebGL and Babylon.js - Codemotion.es
Creating 3D Worlds with WebGL and Babylon.js - Codemotion.es
 
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSIntroduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JS
 
Babylon.js WebGL Paris
Babylon.js  WebGL ParisBabylon.js  WebGL Paris
Babylon.js WebGL Paris
 
Microsoft et l'Open Source
Microsoft et l'Open SourceMicrosoft et l'Open Source
Microsoft et l'Open Source
 
Back from BUILD - WebGL
Back from BUILD -  WebGLBack from BUILD -  WebGL
Back from BUILD - WebGL
 
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.jsNGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
 
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.jsRéaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
 
Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5Les défis d’une application mobile multi-périphériques avec HTML5
Les défis d’une application mobile multi-périphériques avec HTML5
 
Pointer events
Pointer eventsPointer events
Pointer events
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
W3 cafe ie10etwindows8
W3 cafe ie10etwindows8W3 cafe ie10etwindows8
W3 cafe ie10etwindows8
 
Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3Création d'une application html5 utilisant canvas, svg et les animations css3
Création d'une application html5 utilisant canvas, svg et les animations css3
 
Création d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockageCréation d’une application gérant l’offline et le stockage
Création d’une application gérant l’offline et le stockage
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 

AMDEV: Graphismes avec html5 grâce à canvas et svg

Hinweis der Redaktion

  1. http://www.w3.org/2010/Talks/03-schepers-mix/themepark-train.svg
  2. Bing Maps : http://www.bing.com/maps/#JmNwPTQ3LjY3ODY3NjU0NTYxOTk2fi0xMjIuMTEzMDg1Mzg5MTM3MjcmbHZsPTEyJnN0eT1yJnJ0cD1wb3MuNDcuNjM5NzU3Xy0xMjIuMTI5OTM0XzElMjBNaWNyb3NvZnQlMjBXYXklMkMlMjBSZWRtb25kJTJDJTIwV0ElMjA5ODA1Mi04MzAwX19fZV9+cG9zLjQ3LjcxNzU0Nl8tMTIyLjA5ODY2MV8xOD Complex Document : http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtmlAnimation : Raphael.js : http://raphaeljs.com Charting : http://www.highcharts.com &amp; http://www.w3.org/2010/Talks/03-schepers-mix/chart.htmlAccessibility : http://people.mozilla.com/~dbolter/svg-checkbox-test.html
  3. http://themaninblue.com/experiment/AnimationBenchmark/svg/?particles=1000
  4. http://www.catuhe.com/ms/index.htm#gameZone
  5. http://david.blob.core.windows.net/html5platformerscale/index.html