J'essaie d'écrire du texte sur un élément de toile, mais il semble que les options de police que j'ai placées sont complètement ignorées. Peu importe ce que je les change, tout cela ressort de la même chose, ce que je crois être le Sans Serif de 10px par défaut. Heres ce que j'ai (cette fonction fonctionne sur la charge) il ne fonctionne pas dans Firefox ou chrome.
3 Réponses :
Cela fait fonctionner comme un charme.
comme RichTaur mentionné dans son commentaire, cette réponse est fausse. Votre contexte doit être enregistré et restauré à l'aide de Comme il s'avère, le changement CTX.Font doit être utilisé dans la même fonction qui fait le FLUXEXT ()
CTX.SAVE () et ctx.restore () car il est actuellement réinitialisé lorsque vous appelez Canvas.getContext ('2d') encore.
Je soupçonne que chaque fois que vous réécrivez le contexte graphique avec Canvas.getContext ('2d'), vous obtenez un nouveau contexte réinitialisé à la police par défaut. Cela a du sens, parce que vous effectuez des opérations de dessin et que vous allez probablement rendre toutes sortes de texte dans toutes les polices différentes et les parcourir lorsque vous rendant chaque image ... SO) Réglage de la police de chaque nouveau contexte. sens.
> Comme il s'avère, le changement de CTX.Font doit être utilisé dans la même fonction qui fait le remplissage () <- ce n'est pas la façon dont cela fonctionne. Les paramètres sont globaux à ce contexte afin qu'il soit probablement de remplacer dans votre autre fonction. Vous voudriez faire comme ctx.save () puis ctx.restore () pour enregistrer l'état de votre contexte. Voir: développeur.mozilla.org/fr/Drawing_text_UNT_A_CANVAS
Cela peut également se produire si vous réinitialisez la taille de la toile. Au moins, j'ai vu cela dans le chrome 23 aujourd'hui.
context.font = 'bold 20px arial'; canvas.width = 100; canvas.height = 100; console.log(context.font); // gives '10px sans-serif'
Très bon conseil! J'ai passé pour toujours à ce sujet. Pourquoi les propriétés comme celle-ci sont-elles réinitialisées lorsque la taille change? Cela me semble absurde.
J'ai eu un problème similaire. J'avais fourni un élément div avant l'élément de toile et la préchargée de la police.
EG: - .
dans le CSS,
#loadfont { Font-famille: "Arial" }
Cela se produit également si vous passez dans une chaîne de mauvais format, telle que
"12 px monospace" avec un espace supplémentaire.