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

1 760 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 760
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1
Actions
Partages
0
Téléchargements
51
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • http://www.w3.org/2010/Talks/03-schepers-mix/themepark-train.svg
  • 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 & http://www.w3.org/2010/Talks/03-schepers-mix/chart.htmlAccessibility : http://people.mozilla.com/~dbolter/svg-checkbox-test.html
  • http://themaninblue.com/experiment/AnimationBenchmark/svg/?particles=1000
  • http://www.catuhe.com/ms/index.htm#gameZone
  • http://david.blob.core.windows.net/html5platformerscale/index.html
  • 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?

    ×