Images et textes

Les images

Il est possible d'insérer des images au sein d'un canvas. Pour ce faire, on utilisera la méthodedrawImage(image, x, y), mais attention : pour qu'une image puisse être utilisée, elle doit au préalable être accessible via un objet Image ou un élément <img />. Il est également possible d'insérer un canvas dans un canvas ! En effet, le canvas que l'on va insérer est considéré comme une image.

Insérons l'âne Zozor du Site du Zéro au sein du canvas :

var zozor = new Image();

zozor.src = 'zozor.png'; // Image de 80x80 pixels

context.drawImage(zozor, 35, 35);

On aurait pu récupérer une image déjà présente dans la page : <img id="myZozor" src="zozor.png" alt="Zozor assis" />

var zozor = document.querySelector('#myZozor');

context.drawImage(zozor, 35, 35);

Attention aux grandes images : si l'image est trop longue à charger, elle sera affichée de façon saccadée au sein du canvas. Une solution est d'utiliser onload pour déclencher le dessin de l'image une fois qu'elle est chargée :

var zozor = new Image();

zozor.src = 'zozor.png';

zozor.onload = function() {

context.drawImage(zozor, 35, 35);

}

Zozor est affiché dans le canvas

Mise à l'échelle

drawImage(image, x, y, largeur, hauteur) possède deux paramètres supplémentaires facultatifs : largeur et hauteur, qui permettent de définir la largeur et la hauteur que l'image occupera une fois incrustée dans le canvas. Si la diminution de la taille des images ne pose pas trop de problèmes, évitez toutefois de les agrandir, au risque de voir vos images devenir floues.

context.drawImage(zozor, 35, 35, 40, 40);

Ici, l'image est réduite de moitié, puisque de base elle fait 80 pixels sur 80 pixels.

Recadrage

Quatre paramètres supplémentaires et optionnels s'ajoutent à drawImage(). Ils permettent de recadrer l'image, c'est-à-dire de prélever une zone rectangulaire au sein de l'image afin de la placer dans le canvas :

drawImage(image, sx, sy, sLargeur, sHauteur, dx, dy, dLargeur, dHauteur)

Les paramètres commençant par s indiquent la source, c'est-à-dire l'image, ceux commençant par dindiquent la destination, autrement dit le canvas :

Il est possible de recadrer une image

Toute la difficulté est donc de ne pas s’emmêler les pinceaux dans les paramètres :

var zozor = document.querySelector('#plush');

context.drawImage(zozor, 99, 27, 100, 100, 25, 25, 100, 100);

Les patterns

Comment faire se répéter une image pour, par exemple, créer un fond ? C'est possible de faire une double boucle for et d'insérer plusieurs fois la même image. Mais il y a plus simple : les patterns. On parle aussi de motifs en français. Un pattern est une image qui se répète comme un papier peint. Pour en créer un, on utilise la méthode createPattern(image, type). Le premier argument est l'image à utiliser, et le deuxième est le type de pattern.

Différents types existent, mais seul repeat semble reconnu par la plupart des navigateurs :

var zozor = new Image();

zozor.src = 'zozor.png';

zozor.onload = function() {

var pattern = context.createPattern(zozor, 'repeat');

context.fillStyle = pattern;

context.fillRect(0, 0, 150, 150);

}

Zozor se répète grâce aux patterns

La façon de procéder est un peu étrange, puisqu'il faut passer le pattern à fillStyle, et ensuite créer un rectangle plein qui recouvre l'entièreté du canvas. En clair, il s'agit de créer un rectangle avec une image qui se répète comme fond.

Vous devez absolument passer par l’événement load, sinon le pattern ne s'affichera pas correctement si l'image n'est pas chargée.

Le texte

Pour écrire du texte au sein d'un canvas, il y a les méthodes fillText() et strokeText(), secondées par la propriété font, qui permet de définir le style du texte :

context.fillStyle = "rgba(23, 145, 167, 1)";

context.fillRect(50, 50, 50, 50);

context.font = "bold 22pt Calibri,Geneva,Arial";

context.fillStyle = "#fff";

context.fillText("js", 78, 92);

Un logo Javascript textuel créé… en Javascript

Les méthodes fillStyle et strokeStyle sont toujours utilisables, puisque les textes sont considérés comme des formes au même titre que les rectangles ou les arcs.

La propriété font reçoit des informations sur la police à utiliser, à l'exception de la couleur, qui est gérée par strokeStyle et fillStyle. Dans l'exemple qui va suivre, nous allons utiliser un texte en Calibri, de 22 points et mis en gras. Ça ressemble à du CSS en fait.

fillText() reçoit trois paramètres : le texte et les positions x et y de la ligne d'écriture du texte :

Un texte écrit en Javascript

Un quatrième paramètre peut être ajouté : la largeur maximale que le texte doit utiliser.

Créé avec HelpNDoc Personal Edition: Générateur de documentation complet