L'élément CANVAS
L'élément canvas permet de définir une zone graphique 2d ou 3d.
La définition d'une telle zone graphique s'effectue comme suit:
<canvas id="cv" width="720" height="350"></canvas>
Ceci réserve une zone graphique de 720 pixels de large et 350 pixels de haut.
Ensuite, on peut définir un script en javascript chargé de traiter des données
graphiques dans canvas:
<!--[if IE]><script src="excanvas.js"></script><![endif]--> <script type="text/javascript"> window.onload = function() { var drawingCanvas = document.getElementById('cv'); // Test si élémenrt canvas est dans le DOM et que le navigateur accepte CANVAS if(drawingCanvas && drawingCanvas.getContext) { // Initialise un contexte graphique 2D var ctx = drawingCanvas.getContext('2d'); // sélectionne la couleur de tracé: rouge ctx.strokeStyle = 'rgb(255,0,0)'; // Marque l'origine du tracé ctx.beginPath(); ctx.moveTo(0,350); // déplace le le tracé de points en points ctx.lineTo(60.5,320); ctx.lineTo(121,350); ctx.lineTo(181.5,230); ctx.lineTo(242,300); ctx.lineTo(302.5,340); ctx.lineTo(363,260); ctx.lineTo(423.5,220); ctx.lineTo(484,300); ctx.lineTo(544.5,280); // génère physiquement le tracé ctx.stroke(); } } </script>
Pour aller plus loin avec canvas, voir cet article
Utiliser CANVAS et la librairie RGRAPH
Pour en savoir plus sur CANVAS
https://developer.mozilla.org/fr/Dessiner_avec_canvas
http://www.html5canvastutorials.com/