bibliothèque de canevas pour dessiner des images

Question

HTML5 canvas offre beaucoup de flexibilité pour dessiner des images en utilisant javascript. Nous devons générer un code javascript basé sur les entrées de l'utilisateur (disons quelque chose comme 10 boules de couleur bleue, 5 carrés de couleur verte et d'une certaine taille ...). Existe-t-il une bibliothèque qui fournit des API (s) Javascript appropriées pour qu'il soit plus facile de générer la toile avec le code javascript pour les exigences listées ci-dessus?

Answer 1

Avec Fabric.js il est assez trivial de dessiner des formes simples (cercles, rectangles, etc.) sur la toile. Il prend également en charge l'importation et la manipulation d'images.

rectangle Affichage, par exemple, est aussi facile que:

var canvas = new fabric.Canvas('id_of_canvas_element'); 

var rect = new fabric.Rect({ 
    top: 100, 
    left: 100, 
    width: 60, 
    height: 70, 
    fill: 'red' 
}); 

canvas.add(rect); 

Jetez un oeil à demos.