.NET Infinity: Premiers pas en HTML 5

L’heure est venu de s’intéresser progressivement à HTML 5, dans la mesure où la spécification semble pouvoir prochainement dépasser le stade du Working Draft.

Donc, par où commencer? HTML 5 propose tout un tas de fonctionnalités hétérogènes. Certaines sont déjà supportées par la plupart des navigateurs, d’autres pas. Elles ne sont d’ailleurs visiblement pas toutes au même niveau d’avancement. Certaines portent sur l’aspect graphique, d’autres sur la communication ou encore sur la validation des formulaires par exemple. De même, les tutoriaux disponibles sont nombreux, mais dispersés. Donc pour démarrer, la façon la plus logique de procéder est de se concentrer sur les parties relativement stables et déjà implémentées par les navigateurs courants :

Les fonctionnalités multimédia (audio, vidéo, dessin, etc.)
Les fonctions de drag&drop
Le storage

Plus précisément, l’idée est ici de s’intéresser en premier lieu au Canvas, une nouvelle balise introduite par HTML 5 qui permet de définir une région dans laquelle on peut dessiner. Après avoir fastidieusement récupéré des bouts de code pour constituer un exemple simple et fonctionnel quelque soit le navigateur client, voici un premier résultat :

<!DOCTYPE html>
<html>
<head>
    <title>Bouncing balls demo</title>
</head>
<body>
    <section id="wrapper">
    <header>
      <h1>Bouncing balls</h1>
    </header>
    <article></article>
    </section>
    <script>
        // global variables
        var vSpeedInc = 1;
        var hSpeed = 5.0;
        var vSpeed = 1.0;
        var circleRadius = 20;
        var circleXPos = 100.0;
        var circleYPos = 100.0;
        var width = 800;
        var height = 600;
        var framerate = 50;

        // start animation at startup
        startAnimation();

        function startAnimation(data) {
            // canvas initialization
            var canvas = document.createElement('canvas');
            canvas.height = height;
            canvas.width = width;
            document.getElementsByTagName('article')[0].appendChild(canvas);
            var ctx = canvas.getContext("2d");

            // lauch timer
            window.canvasTimer = setInterval(draw, 1000 / framerate);

            function draw() {
                // draw
                ctx.clearRect(0, 0, width, height);
                ctx.strokeStyle = "#000000";
                ctx.fillStyle = "#FF0000";
                ctx.beginPath();
                ctx.arc(circleXPos, circleYPos, circleRadius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.stroke();
                ctx.fill();

                // compute
                if (circleXPos + circleRadius >= width || circleXPos - circleRadius <= 0)
                    hSpeed = -hSpeed;


                if (circleYPos + circleRadius + vSpeed >= height) {
                    vSpeed = -vSpeed;
                }
                else {
                    vSpeed = vSpeed + vSpeedInc;
                }

                circleXPos = circleXPos + hSpeed;
                circleYPos = circleYPos + vSpeed;
            }
        }
    </script>
</body>
</html>

Ce code anime une balle qui rebondit et se cogne sur les coins du Canvas. Il fonctionne seul, par simple copier/coller dans une page HTML vierge. Il représente donc un bon point de départ pour des expérimentations diverses, ce qui manque visiblement dans les différents tutoriaux disponibles.

.NET Infinity

mardi 14 juin 2011

Premiers pas en HTML 5 – Canvas

1 commentaire: