Paper.js, le couteau Suisse pour créer des dessins vectoriels dynamiques


Paper.js est un framework open source qui permet de dessiner des graphes vectoriels en utilisant les Canvas HTML5.

Les effets réalisables sont impressionnants et l’implémentation facile.

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
    // Create a Paper.js Path to draw a line into it:
    var path = new Path();
    // Give the stroke a color
    path.strokeColor = 'black';
    var start = new Point(100, 100);
    // Move to start and draw a line from there
    path.moveTo(start);
    // Note the plus operator on Point objects.
    // PaperScript does that for us, and much more!
    path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
</html>

Pour pouvoir en profiter il faut un navigateur moderne qui supporte les canvas.

Je vous conseille d’y jeter un coup d’œil.

Téléchargez Paper.js