Gury - Simplifier l'utilisation du HTML5 Canvas avec ce plugin jQuery

Gury est un plugin jQuery permettant de faciliter l'utilisation de l'élément HTML5 Canvas.

Créer des animations en HTML5 Canvas est plutôt fastidieux, grâce à Gury, il sera possible de la faire plus facilement à l'aide des méthodes enchainables proprosées.

Voici un petit exemple permettant de dessiner un carré qui va tourner sur lui même:

$g('screen').size(100, 100).add({
    theta: 0, 
    draw: function(ctx) {
        ctx.save();
        ctx.translate(50, 50);
        ctx.rotate(this.theta);
        ctx.fillStyle = "#ada";
        ctx.fillRect(-32, -32, 64, 64);
        ctx.restore();
        this.theta += Math.PI / 120;
    }
}).play(16);

Le plugin dispose de plusieurs fonctions bien pratiques qui sont chainables les unes à la suite des autres:

• .canvas
• .place(node)
• .size(width, height)
• .background(color)
• .add(obj)
• .each(fonction)
• .hide()
• .show()
• .draw()
• .clear()
• .play(interval)
• .pause()
• .stop()
• Etc.

Consultez la doc sur Github pour en savoir plus et apprendre avec les exemples fournis.

A vous de jouer à présent !

Site Officiel