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

http://blogs.msdn.com/davrous
http://blogs.msdn.com/eternalcoding

Peu de slides et beaucoup de demos!

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

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>

Des différences plus subtiles

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/

1ère étape : un jeu simple !

La dernière étape pour vous aider à choisir

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

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

Contenu connexe

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

Notes de l'éditeur