• Introduction
• Insertion de canvas dans une page web
• Accéder au canvas en javascript
• Dessiner des formes
• Différents rectangles
• Gérer l'aspect d'une forme
• Dessiner des cercles et ellipses
• Tracer des lignes
• Tracer des courbes
• Ecrire du texte
• Ajouter des images
• Utiliser des motifs
• Gérer les propriétés dans le script
• Transformations des formes
• Translation
• Mise à l'échelle
• Rotation
• Utiliser une matrice de transformation
• Ajouter des ombres avec Canvas
• Créer des masques
• Modes de fusion et superposition
• Créer des animations avec canvas
• Effacer le contenu du canvas
• Gérer les intervalles de temps
• Mouvement linéaire simple
• Interagir avec l'utilisateur
• Utiliser la souris
• Détecter et utiliser un évènement clavier
• Collisions entre objets
• Prise en main de Canvas

Tracer des courbes

Dans Canvas, il existe trois types de courbes :

• Courbe quadratique
• arc
• Courbe de Bézier

Le choix de l'une ou l'autre appartient au développeur et de ses habitudes. Les courbes de Béziers sont cependant très répandues dans de nombreux logiciels, par exemple Inkscape, et permettant d'avoir une assistance simple dans la définition des différentes coordonnées des points qui composent la courbe.

Courbe Quadratique

jeu.fillStyle = "red";
jeu.strokeStyle = "green";
jeu.lineWidth = "5";

jeu.beginPath();

jeu.moveTo(100,50);
jeu.quadraticCurveTo(150,20,200,50);//(ctrlPtx, ctrlPtY,200,50);
jeu.lineTo(150,150);


jeu.closePath();

jeu.fill();
jeu.stroke();

Courbe de Bézier

jeu.fillStyle = "red";
jeu.strokeStyle = "green";
jeu.lineWidth = "5";

jeu.beginPath();

jeu.moveTo(100,50);
jeu.quadraticCurveTo(150,20,200,50); //(ctrlPtx, ctrlPtY,200,50);
jeu.bezierCurveTo(100,100,180,180,150,150); //(ctrlPt1x, ctrlPt1Y,ctrlPt2x, ctrlPt2Y,200,50);

jeu.closePath();

jeu.fill();
jeu.stroke();