Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,887 views

Published on

  • Login to see the comments

  • Be the first to like this

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

  1. 1. http://blogs.msdn.com/davroushttp://blogs.msdn.com/eternalcoding
  2. 2. Peu de slides et beaucoup de demos!
  3. 3. SVG
  4. 4. Scalable Vector Graphics
  5. 5. 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>
  6. 6. Fonctionnalité SVG IE9 IE10SVG 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
  7. 7. Canvas
  8. 8. Une surface de pixels dynamique contrôlée par JS
  9. 9. 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>
  10. 10. Comment faire son choix ?
  11. 11. Les choix les plus simples
  12. 12. Des différences plus subtiles
  13. 13. L’outillage
  14. 14. Vous ne serez pas obligé de taper du SVG dans Notepad!
  15. 15. Vous ne serez pas obligé de taper les primitives JS non plus ;-)http://visitmix.com/labs/ai2canvas/
  16. 16. Allez, maintenant, du fun !
  17. 17. 1ère étape : un jeu simple !
  18. 18. La dernière étape pour vous aider à choisir
  19. 19. Revue de jeux plus complexes
  20. 20. http://blogs.msdn.com/davrous/archive/2011/05/09/introduction-aux-apis-graphiques-d-html5-svg-amp-canvas-1-4.aspxhttp://blogs.msdn.com/davrous/archive/2011/09/09/html5-platformer-portage-complet-du-jeu-xna-vers-lt-canvas-gt-gr-226-ce-224-easeljs.aspxhttp://blogs.msdn.com/eternalcoding/archive/2011/07/13/retours-sur-un-d-233-veloppement-html5-amp-javascript.aspxhttp://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
  21. 21. questions?

×