Niveau Niveau confirmé

Introduction à Canvas

Tutorieljavascript

Publié par le (33192 lectures)

texte canvas

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

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).

Merci pour ce tuto qui va à l'essentiel.

Même 6 ans après sa création, il me semble toujours d'actualité.

Peut-être une petite coquille dans la partie 7 :

"...createImageData(100,100) devra stocker l'information de 1000 pixels ce qui produira un tableau à 4000 valeurs."

100 * 100 = 10 000, donc 40 000 valeurs