Formes géométriques
Canvas fournit peu de formes géométriques. Il y a le rectangle, les arcs et… c'est tout. Mais pour compléter ce manque, Canvas dispose de chemins ainsi que de courbes de Bézier cubiques et quadratiques.
Les chemins vont nous permettre de créer des lignes et des polygones. Pour ce faire, plusieurs nouvelles méthodes : beginPath() et closePath(), moveTo(), lineTo(), stroke() et son équivalent fill().
Comme pour la création de rectangles, la création de chemins se fait par étapes successives. On commence par initier un nouveau chemin avec beginPath(). Ensuite, avec moveTo(), on déplace le « crayon » à l'endroit où on souhaite commencer le tracé : c'est le point de départ du chemin. Puis, on utilise lineTo()pour indiquer un deuxième point, un troisième, etc. Une fois tous les points du chemin définis, on applique au choix stroke() ou fill() :
context.strokeStyle = "rgb(23, 145, 167)"; context.beginPath(); context.moveTo(20, 20); // 1er point context.lineTo(130, 20); // 2e point context.lineTo(130, 50); // 3e context.lineTo(75, 130); // 4e context.lineTo(20, 50); // 5e context.closePath(); // On relie le 5e au 1er context.stroke(); |
closePath() n'est pas nécessaire ; il termine le chemin pour nous, en reliant le dernier point au tout premier. Si on veut une forme fermée, via stroke(), c'est assez pratique. Par contre, si on veut remplir la forme avec fill(), la forme sera fermée automatiquement, donc closePath() est inutile.
En plus des lignes droites, il est possible de tracer des arcs de cercle, avec la méthode arc(x, y, rayon, angleDepart, angleFin, sensInverse). Les angles sont exprimés en radians (oui, rappelez-vous vos cours de trigonométrie !).
Avec les arcs, x et y sont les coordonnées du centre de l'arc. Les paramètres angleDepart et angleFin définissent les angles de début et de fin de l'arc. Comme dit plus haut, c'est exprimé en radians, et non en degrés.
Pour rappel, pour obtenir des radians il suffit de multiplier les degrés par π divisé par 180 : (Math.PI / 180) * degrees.
context.beginPath(); // Le cercle extérieur context.arc(75, 75, 50, 0, Math.PI * 2); // Ici le calcul est simplifié context.stroke();
context.beginPath(); // La bouche, un arc de cercle context.arc(75, 75, 40, 0, Math.PI); // Ici aussi context.fill();
context.beginPath(); // L'œil gauche context.arc(55, 70, 20, (Math.PI / 180) * 220, (Math.PI / 180) * 320); context.stroke();
context.beginPath(); // L'œil droit context.arc(95, 70, 20, (Math.PI / 180) * 220, (Math.PI / 180) * 320); context.stroke(); |
Un smiley dessiné avec Javascript
Pour chaque arc, il est plus propre et plus facile de commencer un nouveau chemin avec beginPath().
Comme on l'a vu plus haut, moveTo() permet de déplacer le « crayon » à l'endroit où l'on souhaite commencer un chemin. Mais cette méthode peut aussi être utilisée pour effectuer des « levées de crayon » au sein d'un même chemin :
context.beginPath(); // La bouche, un arc de cercle context.arc(75, 75, 40, 0, Math.PI); context.fill();
context.beginPath(); // Le cercle extérieur context.arc(75, 75, 50, 0, Math.PI * 2);
context.moveTo(41, 58); // L'œil gauche context.arc(55, 70, 20, (Math.PI / 180) * 220, (Math.PI / 180) * 320);
context.moveTo(81, 58); // L'œil droit context.arc(95, 70, 20, (Math.PI / 180) * 220, (Math.PI / 180) * 320); context.stroke(); |
Et si on retire les deux moveTo(), on obtient quelque chose comme ça :
Sans moveTo(), le résultat n'est pas celui attendu
Il est également possible de réaliser des courbes, par le biais de courbes de Bézier. Deux types de courbes sont disponibles : cubique et quadratique. Ce genre de courbes est relativement connu, surtout si vous avez déjà utilisé des logiciels de dessin comme Adobe Photoshop ou The GIMP. Les courbes sont définies par les coordonnées des tangentes qui servent à la construction des courbes. Voici les deux types de courbes, avec les tangentes colorées en gris :
Les tangentes définissent les courbes
Une courbe quadratique sera dessinée par quadraticCurveTo(), alors qu'une courbe cubique le sera par bezierCurveTo() :
quadraticCurveTo(cp1X, cp1Y, x, y)
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) |
Les courbes sont définies par leurs points d'arrivée (x et y) et par les points de contrôle. Dans le cas d'une courbe de Bézier cubique, deux points sont nécessaires. La difficulté des courbes de Bézier est de connaître les valeurs utiles pour les points de contrôle. C'est d'autant plus complexe qu'on ne voit pas en temps réel ce qu'on fait… Ce genre de courbes est donc puissant, mais complexe à mettre en œuvre.
Il existe toutefois des plugins qui permettent de convertir des dessins vectoriels en instructions Canvas. C'est le cas de Ai2Canvas, un plugin pour Adobe Illustrator.
Voici une variante du logo Javascript à partir d'un rectangle arrondi :
context.beginPath(); context.moveTo(131, 119); context.bezierCurveTo(131, 126, 126, 131, 119, 131); context.lineTo(30, 131); context.bezierCurveTo(23, 131, 18, 126, 18, 119); context.lineTo(18, 30); context.bezierCurveTo(18, 23, 23, 18, 30, 18); context.lineTo(119, 18); context.bezierCurveTo(126, 18, 131, 23, 131, 30); context.lineTo(131, 119); context.closePath(); context.fillStyle = "rgb(23, 145, 167)"; context.fill();
context.font = "68px Calibri,Geneva,Arial"; context.fillStyle = "white"; context.fillText("js", 84, 115); |
Le logo javascript dessiné… en Javascript
Ce n'est pas compliqué à utiliser, c'est le même principe qu'arc(). Ce qu'il y a de difficile ici est de s'y retrouver dans les coordonnées.
Créé avec HelpNDoc Personal Edition: Sites web iPhone faciles