Canvas dans HTML 5
La surface graphique de HTML 5 est un outil universel pour créer des applications, pour mobiles ou le bureau.
Canvas est déjà utilisé pour réaliser des jeux et constitue donc une alternative à Flash, comme il sert pour des applications plus sérieuses telles la cartographie, les figures géométriques, les plans d'architecte, etc...
Une des principales tendance chez les webmasters actuellement est de porter les anciens logiciels sur ce nouveau support. On voit donc Sim City, Wolfenstein 3D, apparaître sur des pages Web.
Tutoriel
Des premiers pas aux tracés complexes.
Combien de balises canvas dans une page Web?
Réponse par l'exemple: on peut en avoir 10000!
Premiers pas avec Canvas
Comment utiliser la balise canvas.
Tracer une ligne
Et changer de couleur.
Tracer une courbe.
Courbe quadratique vs. Bézier.
Les méthodes rect et fillRect.
Tracé et remplissage de rectangle.
Réaliser un rectangle aux coins arrondis.
Utilisation de la fonction quadraticCurveTo.
Dessiner un arc.
Utilisation de la méthode arc. Une démonstration interactive est incluse.
Du cercle au graphe en secteurs circulaire.
On réalise un graphe en tarte en remplissant des secteurs de couleurs différentes. On ajoute des libellés avec un peu de trigonométrie en plus.
Dessiner une ellipse avec la méthode arc.
La méthode arcTo.
Exemple illustré pour comprendre son fonctionnement.
Transformations de base sur une image.
Comment inverser une image, lui imprimer une rotation, etc... Ces démonstrations sont aussi l'occasion de mieux connaître les possibilité de canvas et notamment de voir l'avantage des fonctions translate et scale.
Transparence
Comment donner un effet de transparence à une image.
Scripts
SVG dans Canvas
Utiliser des images vectorielles prédéfinies, et écrites dans le format SVG, dans une balise canvas.
Logo Maker
Editeur de logo en ligne. Mode d'emploi.
Générateur de diagramme circulaire
Outil en ligne pour créer un graphe en parts de tarte, en quelques clics.
Dessiner des phylactères dans Canvas
Placer une citation dans une bulle de bande dessinées.