#Barcamp : Canvas HTML contexte 2D

Depuis l’arrivée de HTML5 et de ses nouveaux éléments, les sites et applications web peuvent profiter de fonctionnalités de dessin en 2D et 3D dans le navigateur. L’élément qui nous intéresse ici est <canvas>. Il s’agit d’un espace de pixels initialement transparents, armés de Javascript pour réaliser un bon nombre de fonctions graphiques, partant du simple tracé de courbe pour aller jusqu’aux animations et jeux vidéo.

Pour déclarer un canvas il suffit d’utiliser la balise dans le HTML.

À partir de ce moment, tout ce passe côté JS

Il suffit de cibler le canvas par son ID puis de lui donner un context :

Dans ce billet je vais me focaliser sur le contexte en 2D.

Après cette étape préliminaire, nous avons à notre disposition une grille de pixel dont le point d’origine est en haut à gauche à la position (0,0).

Tracer des lignes

Bon avoir une grille c’est bien mais le mieux est de pouvoir dessiner donc voyons comment peut-on tirer des trait dans espace.

Un tracé est d’abord initialisé par la méthode beginPath(). Le point de référence de début du tracé est désigné avec moveTo(x,y). Il s’agit en quelque sorte de décider à partir de quel emplacement le pinceau va être posé. Puis vient le tracé de la ligne elle-même avec la méthode lineTo(x,y) qui va ajouter un segment au chemin qui fut débuté par beginPath(). On peut ajouter autant de segments que l’on veut, puis éventuellement « fermer » la forme pour revenir automatiquement au point de départ avecclosePath() .

Notre dessin est donc sur le papier mais, avant qu’il n’apparaisse sur notre écran il faut le remplir avec une des deux propriétés suivantes :

Pour agir sur les couleur du dessin il faut agir sur deux propriétés, fillStyle et strokeStyle:

fillStyle et strokeStyle accepte les noms des couleurs, leurs codes hexadécimal, ou encore leurs valeurs en rgb.

Il existe aussi la propriété lineWidth qui permet de modifier l’épaisseur du trait.

Forme Géometrique

Rectangle

Désormais nous savons comment poser notre crayon, l’utiliser pour tracer des ligne mais tout faire de A à Z serait long et fastidieux surtout si l’on souhaite dessiner des cercles ou autres élipses. Heureusement pour nous il existe des propriétés pour nous aider.

Pour dessiner un rectangle :

fillRect(startx, starty, hauteur, largeur)

A l’inverse clearRect permet d’effacer une portion de rectangle donné.

clearRect(startx, starty, hauteur, largeur)

Cercle

Les traits droits c’est bien, mais pouvoir faire des cercles ou des arcs de cercle c’est très pratique. Deux méthodes existent : arcTo() et surtout arc(). Le prototype de cette dernière fonction définit les coordonnées centrales de l’arc, son rayon (toujours en pixels), l’angle de début et de fin, et enfin dans quel sens le pinceau va tourner grâce à un booléen.

arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )

N.B : Sachant que l’on est dans une configuration trigonométrique les angles sont définis en radians avec Math.PI (un tour complet de cercle = 2*Math.PI) et le sens de rotation est contraire aux aiguilles d’une montre lorsqu’il vaut true.

Courbe spécifique

Nous savons faire des formes et des droites, passons à quelque chose de plus spécifique :

La courbe de bézier permet de définir deux points d’inflection (cp1x, cp1y) et (cp2x, cp2y) pour changer de direction durant le tracé du même segment de courbe jusqu’au point de destination (destx, desty).

bezierCurveTo( cp1x, cp1y, cp2x, cp2y, destx, desty )

La courbe quadratique nécessite un point de contrôle en moins. Elle tracera une courbe à partir du point courant, jusqu’au point de destination (destx, desty) en étirant vers le point de contrôle (cpx, cpy).

quadraticCurveTo( cpx, cpy, destx, desty )

Dégradés

Pour aller un peu plus loin avec les couleurs il est possible de réaliser ses propres dégradés

Pour affecter un dégradé à un remplissage, il faut d’abord l’initialiser et définir quelles sont ses couleurs et points d’arrêt (étapes dans le dégradé).

Les deux principaux types de dégradés sont :

  • linéaire (createLinearGradient) le long d’un axe
  • radial (createRadialGradient) avec un centre et une extension circulaire

L’essentiel est de définir une couleur de départ et d’arrivée avec addColorStop(p,couleur). Son premier paramètre est la position de la couleur dans le dégradé, entre 0 (départ) et 1 (fin).

On peut aussi ajouter des points intermédiaires pour introduire des couleurs supplémentaires avec la même méthode.

Le prototype de création d’un dégradé linéaire est createLinearGradient( x0, y0, x1, y1 ) où le couple x0,y0 est le point de départ de l’axe et le couple  x1,y1 en est l’arrivée.

Une fois le dégradé préparé il faut l’assigner à la propriété fillStyle.

Pour un dégradé radial la méthode est semblable : createRadialGradient( x0, y0, r0 , x1 , y1, r1 ) où le couple x0,y0 est le point central du cercle de départ et le couple  x1,y1 de celui d’arrivée.

Tracer du texte sur un canvas serait extrêmement difficile sans  fonctions spécifiques de texte.

  • fillText('Hello world', coordx, coordy) produira des lettres pleines (dont la couleur sera celle de fillStyle)
  • strokeText('Hello world!', coordx, coordy)produira uniquement le contour des lettres (dont la couleur sera celle définie au préalable par strokeStyle).

Une méthode complémentaire permet de mesurer à l’avance l’espace occupé par un texte en pixels : measureText('Hello world'). Cette fonctionnalité sera bien pratique pour éviter que le texte n’apparaisse pas entièrement quand la fenêtre ou quand l’écran n’a pas forcément la résolution attendue.

Plusieurs propriétés du contexte définissent le style du texte :

  • font : police, avec une syntaxe semblable à celle rencontrée en CSS
  • textAlign : alignement horizontal
  • baseline : ligne de base (alignement vertical)

Avec Canvas il est possible d’appliquer des effets, tel que la transparence, la composition de pixel ou encore des effets de transformations.

Il est encore possible de faire du traitement d’image en et ainsi récuperer un tableau de pixel contenant leur valeur RGB, mais ceci sera traité dans un autre article.

Source : Alsacréation

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.