11
votes

HTML5 TRANSVAS TEXT Course pour une grande taille de police non dessinée correctement

Je veux écrire un texte volumineux sur la toile HTML5 avec une couleur de bordure rouge ( Couleur de course ) et Couleur de remplissage verte .

Je donne la largeur de course à 5px .

C'est bien lorsque je définis la taille la taille sur moins de 260px .

Voici mon premier code http://jsfiddle.net/8zd7g/ : xxx

Entrez la description de l'image ici < P> Mais lorsque je définis la taille la taille de la police sur plus grande ou égale à 260 px , la bordure / course de texte n'est pas correctement colorée. Il vient d'avoir une bordure rouge non remplie de couleur rouge.

Voici mon deuxième code http: / /jsfiddle.net/pdr7q/ : xxx

Entrez la description de l'image ici

Ma question est de savoir comment obtenir le texte approprié STOKE remplir avec une grande taille de police (comme la première image plutôt que la seconde)? Merci d'avance :)


7 commentaires

Quel navigateur utilisez-vous? Je viens de vérifier votre deuxième violon à l'aide du chrome 28 et il s'affiche correctement.


J'utilise Google Chrome version 29.0.1547.57 m


Je cours 29.0.1547.57 sur OSX et il est cassé là-bas.


On dirait que c'est un problème chrome avec la dernière version, vous pouvez soumettre un rapport de bogue. Voici une comparaison sur Browerstack: i.imgur.com/4um9jst.png


Ok, merci osez pour votre comparaison :). Je viens de vérifier avec ma version FF 22, et c'est bien. C'est absolument une question de compatibilité de navigateur


Vous pouvez accabler la toile comme solution de contournement. Il semble que Google ait des problèmes avec ses projets d'aura et de clignotement ...


Remarqué que cela se lisse après 256, ce qui me conduit à croire que c'est un problème lié au débordement des bits / octets.


3 Réponses :


1
votes

Ceci fonctionne xxx

Démo de travail ---> jsfiddle


1 commentaires

Cela fonctionne parce que la taille de la police n'est pas supérieure à 260px. Mon problème est parce que le texte supérieur à 260px.



0
votes

Je pense que le problème peut être lié à la famille de polices que vous utilisez: "Calibri"

Je suis sur chrome avec Ubuntu (chrome 27) et je n'ai pas de calibrifier ici, mais j'ai testé avec Arial et cela fonctionne bien (remarquez la taille de la police à 360px, encore plus grande que la vôtre): xxx

démonstration:

jsfiddle


1 commentaires

Toujours le même :(, je pense parce que c'est à propos de ma version Google Chrome. Maintenant, j'utilise Google Chrome V 31.0.1650.57 m



1
votes

C'est un problème connu avec Chrome où les tailles de police sont supérieures à 256 pixels (incl. échelle):
https://code.google.com/p/chromium/issues/detetail ? id = 280221

Pour le moment, il ne semble pas y avoir une solution pour le problème, mais suivez le thread (lien ci-dessus) pour voir l'état à une heure ultérieure (dernière mise à jour 25. Oct).

Vous pouvez réduire le problème en réduisant la largeur de ligne, bien que le problème soit toujours là.

Une autre option consiste à dessiner la moitié de la taille (de sorte que la taille <256) dans une toile temporaire, puis dessinez cette toile dans la taille principale à la taille dont vous avez besoin. Il rendra le texte plus flou, mais cela aura l'air mieux que la version bouclée que je crois.

Firefox a un bogue associé (désalignement à de grandes tailles):
https://bugzilla.mozilla.org/show_bug.cgi?id=909873


0 commentaires