Médiaforma

All posts tagged canvas

Quatre propriétés permettent d’ombrer les éléments affichés dans un canvas :

  • shadowColor définit la couleur de l’ombrage.
  • shadowBlur définit le flouté de l’ombrage. Plus la valeur est grande, plus l’ombrage est flou.
  • shadowOffsetX définit le décalage horizontal de l’ombrage.
  • shadowOffsetY définit le décalage vertical de l’ombrage.

Ces propriétés s’appliquent à tous les objets affichés dans le canevas. A titre d’exemple, nous allons les appliquer à un rectangle plein et à un texte. Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction ombrage() est exécutée.

Comme toujours, les premières instructions de la fonction récupèrent le contexte et le stockent dans la variable ctxt.

Les quatre instructions suivantes définissent les caractéristiques de l’ombrage :

  • le décalage horizontal est de 5 pixels :
    ctxt.shadowOffsetX = 5;
  • le décalage vertical est de 5 pixels :
    ctxt.shadowOffsetY = 5;
  • le flouté est modéré :
    ctxt.shadowBlur = 4;
  • l’ombrage est gris et semi-transparent :
    ctxt.shadowColor   = ‘rgba(100, 100, 100, 0.5)’;

Les deux instructions suivantes tracent un rectangle ombré de couleur bleue en 20, 150. Le rectangle fait 150 pixels de large et 100 pixels de haut.

ctxt.fillStyle     = ‘#00f’;

ctxt.fillRect(20, 150, 150, 100);

Enfin, les trois dernières instructions affichent un texte ombré à 10 pixels du bord gauche et à 50 pixels du bord supérieur :

ctxt.strokeStyle = ‘#f00’;

ctxt.font = ‘bold 50px Algerian’;

ctxt.strokeText(‘Bonjour’, 10, 50);

Voici le résultat dans Internet Explorer :


Il est également possible d’afficher du texte dans un élément canvas. Pour cela, vous utiliserez la fonction javaScript strokeText(). Avant d’exécuter cette fonction, vous définirez la couleur des caractères avec la propriété strokeStyle et la police à utiliser avec la propriété font.

Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript texte() est exécutée.

D’une façon très classique, cette fonction récupère le contexte du canevas et le stocke dans la variable ctxt.

La couleur du tracé est définie avec la propriété strokeStyle. Ici, le texte sera affiché en rouge.

Les caractéristiques de la police sont définies dans la propriété font. Ici, les caractères seront gras, ils auront une taille de 50 pixels et utiliseront la police Algerian.

Il ne reste plus qu’à afficher le texte avec la fonction strokeText(). Les deux paramètres de cette fonction spécifient les coordonnées de l’affichage. Ici, à 10 pixels du bord gauche et à 50 pixels du bord supérieur.

Voici le résultat dans Internet Explorer :


Cette rubrique va vous montrer comment utiliser la fonction drawImage() pour insérer une image dans un canevas. Selon l’effet recherché, vous pouvez transmettre trois ou cinq paramètres à la fonction drawImage() :

  • drawImage(image, x, y); affiche l’image aux coordonnées x, y ;
  • drawImage(image, x, y, largeur, hauteur); affiche l’image aux coordonnées x, y en lui donnant la largeur et la hauteur spécifiées.

Voici le code utilisé :

Le premier bouton déclenche l’exécution de la fonction JavaScript afficheImage() et le deuxième l’exécution de la fonction JavaScript agranditAfficheImage().

Examinons la fonctin afficheImage().

Après avoir récupéré le contexte du canevas, une nouvelle image est définie et stockée dans la variable img :

var img = new Image();

L’instruction suivante indique le nom de l’image :

img.src = ‘chien.png’;

Il ne reste plus qu’à charger l’image en demandant l’exécution de la fonction drawImage() lorsque l’image est chargée :

img.onload = function(){

ctxt.drawImage(img, 10, 10);

}

Examinons la fonction agranditAfficheImage().

Cette fonction est en tout point similaire à la précédente, si ce n’est que cinq paramètres sont passés à la fonction drawImage() pour afficher une version agrandie de l’image. L’image sera affichée aux coordonnées 10, 100 et fera 150 pixels sur 150 :

ctxt.drawImage(img, 10, 100, 150, 150);

Voici le résultat dans Internet Explorer :


Dans cette rubrique, vous allez apprendre à tracer des lignes dans un canevas avec la fonction lineTo(). A titre d’exemple, nous allons tracer un triangle de couleur bleue entouré de bordures de couleur rouge épaisses de 2 pixels. Voici le code utilisé :

Lorsque l’utilisateur clique sur le bouton, la fonction JavaScript triangle() est exécutée.

Les lignes 13 et 14 récupèrent le contexte du caneva et le stockent dans la variable ctxt.

Les trois instructions suivantes définissent la couleur de la bordure, l’épaisseur de la bordure et la couleur de remplissage.

La fonction beginPath() indique que le tracé va commencer. La fonction moveTo() définit l’abscisse et l’ordonnée du point à partir duquel se fera le tracé.

Les trois instructions suivantes définissent les trois côtés du triangle.

Il ne reste plus qu’à remplir le triangle avec la fonction fill(), à tracer son contour avec la fonction stroke() et à clore le tracé avec la fonction closePath().

Voici le résultat dans Internet Explorer :


Dans cette rubrique, vous allez apprendre à tracer une bordure autour d’un rectangle avec la fonction strokeRect(). La couleur de la bordure sera définie avec la propriété strokeStyle et son épaisseur avec la propriété lineWidth.

Voici le code utilisé :

Lorsque l’utilisateur appuie sur le bouton, la fonction JavaScript contour() est exécutée. La ligne 13 définit la variable el pour faciliter l’accès au canevas. La ligne 14 récupère le contexte du canevas. Il ne reste plus qu’à initialiser les propriétés strokeStyle, pour définir la couleur du contour, et lineWidth pour définir l’épaisseur du contour. La fonction strokeRect() dessine le contour.

Voici le résultat dans Internet Explorer :


Dans une rubrique précédente, vous avez appris à tracer un rectangle plein avec la fonction fillRect(). Dans cette rubrique, vous allez apprendre à tracer des rectangles vides et des rectangles pleins avec la fonction rect(). Voici le code utilisé :

Le tracé des rectangles est effectué avec deux boutons insérés dans un formulaire.

Le premier bouton exécute la fonction rectangleVide() et le deuxième la fonction rectanglePlein().

Examinons le code JavaScript mis en œuvre dans ces deux fonctions.

La fonction rectangleVide() trace un rectangle sans le remplir. Après avoir récupéré le contexte du canevas, la fonction beginPath() est exécutée pour indiquer qu’un nouveau tracé va commencer. Ce tracé est effectué avec la fonction rect(). Ses deux premiers paramètres définissent les coordonnées du coin supérieur gauche du rectangle. Ses deux derniers paramètres définissent la largeur et la hauteuir du rectangle.

La fonction stroke() réalise le tracé.

La fonction rectanglePlein() trace un rectangle et le remplit. Après avoir récupéré le contexte du cannevas, la fonction beginPath() indique que le tracé va commencer. Le rectangle est tracé avec la fonction rect(), similaire en tout point à celle utilisée dans la fonction rectangleVide(). L’instruction suivante définit la couleur de remplissage du rectangle en initialisant la propriété fillStyle. Enfin, la fonction fill() trace le rectangle et le remplit.


Dans cette rubrique, vous allez apprendre à tracer des cercles dans un canevas.

Voici le code utilisé :

Le canevas est le même que celui utilisé dans les deux rubriques précédentes. Nous n’y reviendrons pas.

Pour afficher un cercle, nous avons inséré un bouton dans un formulaire. Lorsque l’utilisateur clique sur ce bouton, la fonction JavaScript cercle() est exécutée. Examinons les instructions qui la composent.

Les deux premières lignes récupèrent le contexte du canevas et le stockent dans la variable ctxt.

La ligne suivante définit la couleur de remplissage du cercle en initialisant la propriété fillStyle du canevas.

La fonction beginPath() indique qu’un tracé va être effectué. Nous retrouverons cette fonction dans toutes les instructions de tracé (lignes, courbes de Bézier, etc.). Elle n’a pas été nécessaire pour afficher le rectangle car nous avons utilisé la fonction fillRect() qui nous a permis de tracer directement un rectangle plein, sans effectuer de tracé préalable. Pour afficher un cercle plein, nous allons dans un premier temps le tracer, et dans un deuxième temps le remplir.

Le tracé du cercle se fait avec la fonction arc() :

  • Les deux premiers paramètres représentent le centre du cercle.
  • Le troisième paramètre représente le rayon du cercle.
  • Les quatrième et cinquième paramètres représentent l’angle de départ et l’angle de fin. Ces deux paramètres doivent être exprimés en radians. Comme vous le voyez, cela ne pose pas de problème, car la fonction Math.PI est là pour faciliter les choses. Il suffit de savoir qu’un cercle fait 2 PI radians, et le tour est joué.
  • Enfin, le cinquième paramètre définit le sens du tracé. Dans cet exemple, ce paramètre n’a aucun intérêt. Sachez cependant qu’il peut prendre la valeur false (tracé dans le sens des aiguilles d’une montre) ou true (dans le sens inverse des aiguilles d’une montre).

La dernière instruction de la fonction cercle() remplit le cercle avec la couleur de remplissage définie dans la propriété fillStyle.

Voici le résultat :