Niveau : Confirmé

Introduction à Canvas

Tutoriel par (Développeur, Strasbourg)
Créé le (21339 lectures)
Tags : texte, canvas

Sommaire


Textes

Tracer du texte sur un canvas serait extrêmement fastidieux sans les fonctions spécifiques de texte (imaginez, segment par segment, lettre par lettre). Heureusement, deux méthodes simples sont présentes pour dessiner des caractères :

  • fillText('Hello Kiwi!', coordx, coordy) produira des lettres pleines (dont la couleur sera celle de fillStyle)
  • strokeText('Hello Kiwi!', 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 Kiwi!'). 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)

Canvas et texte

var text = 'Hello kiwi!';
ctx.font = "30pt Verdana";
ctx.textAlign = "left";
ctx.textBaseline = "top";
var textPxLength = ctx.measureText(text);
ctx.fillStyle = "darkgreen";
ctx.fillText(text,25,50);
ctx.fillStyle = "darkorange";
ctx.fillText("width: "+Math.round(textPxLength.width)+"px",25,100);

Démonstration

Commentaires

Didodu258 a dit le

Très bon tutoriel.
J'ai une remarque pour ceux qui voudrait essayer le programme de la section "Retouche des pixels" dans le chapitre "Jouer avec les Pixels".

Il semblerait que la plupart des navigateurs modernes n'exécutent pas la ligne contenant le getImageData pour des mesures de sécurité (quelques informations disponibles ici : goo.gl/p64w8 mais ça reste encore flou pour moi).

J'ai trouvé une solution sur le site stackoverflow.com pour ceux qui n'aurait pas d'hébergement et qui désirerait quand même utiliser ce code : il faut exécuter le script dans un serveur local (localhost). Personnellement j'ai utilisé wampserver et ça fonctionne parfaitement.

À part faire comme ça je n'ai pas trouvé d'autres solutions, si quelqu'un pouvait en dire plus...
(et si on pouvait ne pas supprimer mon commentaire...)

dew a dit le

C'est en effet une restriction de sécurité : il faut utiliser les ressources du domaine qui héberge déjà la page (afin de ne pas extraire les informations d'un domaine tiers). Donc localhost peut fonctionner pour les tests (plutôt qu'une adresse IP, ou un accès via file:// qui ne permet pas d'appliquer une règle de sécurité propre à un domaine).