Un framework Canvas

Je suppose que vous connaissez jQuery. Vous savez que grâce à jQuery la programmation en JavaScript est beaucoup plus simple. Il suffit d'appeler les fonctions haut niveau proposées par ce framework (fonctions qui sont basées sur les fonctions basiques de JavaScript).

Vous avez pu constater que l'API Canvas propose surtout des fonctions basiques et donc pour aboutir à une mise en scène complexe il faut écrire beaucoup de lignes de code...

Paper.js est une bibliothèque Canvas qui propose des fonctions haut niveau (basées sur les fonctions natives de l'API Canvas).

Dans le canevas ci-dessous une animation réalisée avec ce framework.

Le code de la page (extraits)

... <title>animation avec framework paper.js</title> <style> canvas {width : 400px; height :150px;} </style> <script type="text/javascript" src="paper.js"></script> <script type="text/paperscript" canvas="canvas"> var carre = new Path.Rectangle({ point: [100,60], size: [75, 75], fillColor: 'red' }); function onFrame(event) {carre.rotate(2);} </script> ... <body> ... <canvas id="canvas" ></canvas> ...

Commentaire du code

Les dimensions du canevas définies par le CSS (400 par 150).

Observons plus attentivement le deuxième script !
On crée une nouvelle instance de l'objet path.
On paramètre le nouveau chemin : rectangle de 75 par 75 (donc un carré) positionné à 100 et 60 et rempli de rouge.
Ce nouveau chemin est identifié par la variable carre.
Une fonction provoque la rotation de l'objet identifié carre : 2 rotations par seconde.

Je connais mal ce Framework donc je n'en dirai pas davantage et je vous renvoie vers le tutoriel (lien ci-dessou).
Sachez qu'il existe d'autres bibliothèques Canvas ! C'est l'usage qui imposera le standard.
Tutoriel sur paper.js (en anglais) Retour menu