L'élément canvas ne gère malheureusement pas bien le texte. Il y a un tas d'approches (voir par exemple http://canvaspaint.org/blog/2006/12/rendering-text/), mais elles ressemblent surtout à des hacks. Que puis-je faire qui est multi-plateforme et qui me donne le plus de flexibilité pour faire mes polices comme je veux?Quelle est la meilleure façon de dessiner du texte sur un élément de canevas HTML?
Avez-vous regardé typeface.js, http://typeface.neocracy.org. J'entends dire que c'est assez solide pour écrire du texte. Voici leur site:
"typeface.js utilise les capacités de dessin vectoriel des navigateurs pour dessiner du texte dans des documents HTML Pendant un bon moment, les navigateurs ont supporté le dessin vectoriel - Firefox, Safari et Opera supportent l'élément <canvas> (ainsi que SVG) et IE prend en charge VML
Le projet typeface.js comporte deux composants: le module perl pour la conversion des polices et la bibliothèque javascript pour le dessin dans le navigateur Le module perl extrait les informations de plan de glyphes truetype les polices et écrit ces données au format JSON.La bibliothèque javascript traverse ensuite le document HTML et rend le texte en utilisant <canvas> ou VML pour dessiner les glyphes.
Dans les navigateurs qui prennent en charge <canvas>, le texte est sélectionnable, mais vous devez avoir confiance. Lorsque vous sélectionnez, il n'y a pas de commentaires, pas de surlignage pour vous informer que cela fonctionne. Les travaux futurs viseront à mieux mettre en œuvre, le soutien multi-navigateur pour sélectionner texte mis en évidence « (citation de http://typeface.neocracy.org/usage.html)
Si vous voulez utiliser les méthodes de texte HTML5, vous devriez essayer cette bibliothèque. http://code.google.com/p/canvas-text/ Je suis . développeur principal, donc je peux aider, et faire des changements
très rapidement Les démos sont ici: http://canvas-text.googlecode.com/svn/trunk/examples/index.html
Il est encore au stade alpha, donc un rapport de bug et les commentaires sont les bienvenus :)
Ce Le lien est ancien et la spécification vers laquelle il pointe a été mise à jour compte d'un api de dessin de texte. Pour une question similaire (et j'espère utile), voir http://stackoverflow.com/questions/719848/how-do-you-draw-text-on-a-canvas-tag-in-safari –
fillText() est seulement pris en charge dans les versions bêta de Safari et Firefox (pas sûr sur les autres navigateurs), ce qui ne le rend pas très utile. Les différents hacks mentionnés dans mon lien sont principalement multi-plateforme. – swampsjohn