HTML5 / CSS 2.x/3 / PHP / MySQL ...

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>
un tracé graphique à l'aide de CANVAS

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/

http://www.rgraph.net/

Tous les articles sur ce thème