tipo - html5 pdf 2017
Texto suavizado de subpixel en el elemento Canvas de HTML5 (5)
Ahora es posible obtener una representación de fuente subpíxel creando un contexto de lienzo opaco. En Safari y Chrome puedes obtener esto usando este fragmento de código:
var ctx = canvas.getContext("2d", {alpha: false})
Encontré esto en esta publicación de blog .
Estoy un poco confundido con la forma en que el elemento canvas allana el texto y espero que todos puedan ayudar.
En la siguiente captura de pantalla, la parte superior de "Quick Brown Fox" es un elemento H1 y el de abajo es un elemento de lienzo con texto impreso en él. En la parte inferior, puede ver las dos "F" situadas una al lado de la otra y hacer zoom. Observe cómo el elemento H1 se combina mejor con el fondo:
Aquí está el código que estoy usando para representar el texto del lienzo:
var canvas = document.getElementById(''canvas'');
if (canvas.getContext){
var ctx = canvas.getContext(''2d'');
ctx.fillStyle = ''black'';
ctx.font = ''26px Arial'';
ctx.fillText(''Quick Brown Fox'', 0, 26);
}
¿Es posible representar el texto en el lienzo de manera que se vea idéntico al elemento H1? ¿Y por qué son diferentes?
Aquí hay una forma de hacer un procesamiento de subpíxeles para cualquier contenido de lienzo (texto, imágenes, vectores, etc.). http://johnvalentine.co.uk/archive.php?art=tft .
Esquema del método
Se dibuja en un lienzo, que luego se dibuja en la pantalla para aprovechar los subpíxeles a rayas RGB. Funciona con canales alfa también. Tenga en cuenta que esto podría no funcionar si está usando una pantalla vertical, píxeles no rayados o si su navegador muestra lienzos con una resolución inferior a la de su pantalla.
Hay margen para la puesta a punto, pero es una gran ventaja para un método simple.
Esto se denomina genéricamente antialiasing de subpixel , o ClearType en Windows. No conozco ninguna combinación de OS / navegador que sea compatible con Canvas.
Me interesaría ver algunas pruebas que usan desplazamientos de subpíxeles para el texto, para ver si algunos navegadores incluso usan sugerencias basadas en píxeles de la representación de la fuente (alineando ascendentes en los límites de los píxeles, por ejemplo). Mi suposición sería no.
Editar : Mi suposición fue incorrecta; parece que Safari, Chrome y Firefox utilizan alguna sugerencia de fuente de píxeles. Safari y Chrome aparecen iguales, ajustados a los límites de píxeles completos, pero son diferentes de Firefox (ajustando a límites de medio píxel). Vea los resultados visuales de las pruebas (en OS X) aquí: http://phrogz.net/tmp/canvas_text_subpixel.html
Matt, me senté con el problema (mismo / similar) la semana pasada, que, en mi caso, resultó ser debido a las diferencias en la densidad de píxeles en los dispositivos que estaba probando; Escribí sobre esto esta noche - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and
El enlace en posterous está muerto, así que aquí está la esencia del código fuente: https://gist.github.com/joubertnel/870190
Y el fragmento mismo:
// Output to Canvas without consideration of device pixel ratio
var naiveContext = $(''#naive'')[0].getContext(''2d'');
naiveContext.font = ''16px Palatino'';
naiveContext.fillText(''Rothko is classified as an abstract expressionist.'', 10, 20);
// Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
var hidefCanvas = $(''#hidef'')[0];
var hidefContext = hidefCanvas.getContext(''2d'');
if (window.devicePixelRatio) {
var hidefCanvasWidth = $(hidefCanvas).attr(''width'');
var hidefCanvasHeight = $(hidefCanvas).attr(''height'');
var hidefCanvasCssWidth = hidefCanvasWidth;
var hidefCanvasCssHeight = hidefCanvasHeight;
$(hidefCanvas).attr(''width'', hidefCanvasWidth * window.devicePixelRatio);
$(hidefCanvas).attr(''height'', hidefCanvasHeight * window.devicePixelRatio);
$(hidefCanvas).css(''width'', hidefCanvasCssWidth);
$(hidefCanvas).css(''height'', hidefCanvasCssHeight);
hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);
}
hidefContext.font = "16px Palantino";
hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);
Respondiendo mi propia pregunta:
Es posible usar la técnica demostrada en este sitio:
El único problema es que es demasiado lento para implementarlo en una aplicación de producción. Si alguien se cruza de una manera más rápida, por favor hágamelo saber.