Programmation web : dessiner dans une page

Si vous voulez dessiner dans une page (dessin statique ou animé) il y a désormais deux techniques disponibles qui se substituent à Flash :

  • utiliser le format SVG (c’est du XML)
  • utiliser l’API Canvas (c’est une bibliothèque JavaScript)

Ces deux techniques ont chacune des avantages et des inconvénients.

Avec SVG le dessin est vectoriel. Donc il est extensible sans perte de qualité. Les formes du dessin sont des éléments du DOM et peuvent être stylés avec CSS.
Côté inconvénient : mauvaise implémentation chez certains navigateurs même récents.

Avec Canvas le dessin est matriciel. Les formes ne sont pas des éléments du DOM. La bibliothèque Canvas est bien implémentée sur les navigateurs récents.
Côté inconvénient : si l’exécution du Javascript est désactivée la zone de dessin reste désespérement vide …

Remarque : il y a convergence des deux technologie. Ainsi il est désormais possible via le constructeur d’objets graphiques Path2D() d’utiliser la syntaxe SVG pour définir des formes Canvas.

Dessiner avec SVG

Dessiner avec Canvas

Publicités
Cet article a été publié dans canvas, images, JavaScript, programmation web, SVG. Ajoutez ce permalien à vos favoris.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s