Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

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

1 793 vues

Publié le

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

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?

×