Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

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

1.898 Aufrufe

Veröffentlicht am

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

  • Gehören Sie zu den Ersten, denen das gefällt!

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?

×