AMDEV: Graphismes avec html5 grâce à canvas et svg7. 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>
8. 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
12. 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>
23. Vous ne serez pas obligé de taper les primitives JS non plus ;-)
http://visitmix.com/labs/ai2canvas/
Editor's Notes 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