8
votes

Mauvaise anti-aliasing du texte dessiné sur toile

Je dessine du texte sur toile et je suis déçu de la qualité de l'antialiasing. Autant que j'ai pu déterminer, les navigateurs ne font pas de subpixel antialisant du texte sur la toile.

est-ce précis?

Ceci est particulièrement perceptible sur iPhone et Android, où le texte résultant n'est pas aussi croustillant que le texte rendu par d'autres éléments DOM.

Toute suggestion de texte de haute qualité mise sur toile?

Joubert


5 commentaires

Dupliqué possible de Sous-programme Texte anti-aliasé sur l'élément de toile de HTML5


J'ai compris la solution et j'ai écrit un article de blog à ce sujet, car je soupçonne que d'autres personnes ont également couru dans cela: http://joubert.posterous.com/crisp-html-5-Canvas-text-on- MOB ILE-Phones - et


Malheureusement, ce lien est maintenant cassé, j'aimerais savoir ce qu'il a dit.


@Jamesm: la peur non, voici: web.archive.org/web/20120427162431/http://joubert.posterous. com / ...


Malheureusement, ce lien est également maintenant cassé. J'aimerais aussi savoir ce que cela dit.


4 Réponses :


0
votes

Il y a une antivaliasing de sous-pixel terminée, mais il appartient au navigateur / os.

Il y avait un peu de Discussion antérieure sur Ceci qui peut vous aider à vous.

Je n'ai pas d'appareil Android ou iOS, mais juste pour des coups de pied, essayez de traduire le contexte par (.5, 0) pixels avant de dessiner et de voir si cela fait une différence dans la manière dont votre texte est rendu.


0 commentaires

3
votes

Essayez d'ajouter la balise Meta suivante à votre page. Cela semble corriger des problèmes anti-aliasing que j'ai eu sur iPhone Safari:

<meta name="viewport" content="user-scalable=no, width=device-width,
      initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5" />


1 commentaires

Merci!! Cela m'a conduit fou



1
votes

Je réalise que c'est une vieille question, mais j'ai travaillé sur ce problème aujourd'hui et je l'ai gagné bien. J'ai utilisé la réponse d'Alix Axel ci-dessus et j'ai dépouillé le code que j'ai trouvé là-bas (sur le lien web.archive.org) à l'essentiel nu.

J'ai modifié une solution un peu, en utilisant deux toiles, une toile cachée pour le texte original et une seconde toile pour montrer le texte anti-asibilisé.

Voici ce que je suis venu ... http://jsfiddle.net/x2cka/

Le code ressemble à ceci; < / p> xxx

J'ai également ajouté un objet de texte de comparaison afin que vous puissiez voir le fonctionnement anti-aliasing.

espère que cela aide quelqu'un!


0 commentaires

9
votes

Ma réponse est venue de ce lien, peut-être que cela aidera quelqu'un d'autre. http://www.html5rocks.com/fr/Tutorials/Canvas/hidpi/

Le code important est le suivant. P>

// finally query the various pixel ratios
    devicePixelRatio = window.devicePixelRatio || 1,
    backingStoreRatio = context.webkitBackingStorePixelRatio ||
                        context.mozBackingStorePixelRatio ||
                        context.msBackingStorePixelRatio ||
                        context.oBackingStorePixelRatio ||
                        context.backingStorePixelRatio || 1,

    ratio = devicePixelRatio / backingStoreRatio;

// upscale the canvas if the two ratios don't match
if (devicePixelRatio !== backingStoreRatio) {

    var oldWidth = canvas.width;
    var oldHeight = canvas.height;

    canvas.width = oldWidth * ratio;
    canvas.height = oldHeight * ratio;

    canvas.style.width = oldWidth + 'px';
    canvas.style.height = oldHeight + 'px';

    // now scale the context to counter
    // the fact that we've manually scaled
    // our canvas element
    context.scale(ratio, ratio);

}


1 commentaires

Merci pour le code! Ça marche très bien. Je me suis levé jusqu'à ce point mais je n'ai pas échoué la toile.