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 defillStyle) -
strokeText('Hello Kiwi!', coordx, coordy)produira uniquement le contour des lettres (dont la couleur sera celle définie au préalable parstrokeStyle).
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)
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);
Commentaires
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...)
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