mano - Tamaño de fuente fraccional lienzo html5?
cambiar tamaño canvas html5 (1)
Pensé que se suponía que debías hacer mi trabajo para mí;) De todos modos aquí es cómo resolví el problema, aunque es un poco complicado y todavía tengo algunos problemas que describiré.
Para recapitular (porque quizás no estaba claro en la pregunta), intentaba multiplicar los tamaños de letra por un número de coma flotante para agrandar y reducir el texto. Pero esto dio lugar a resultados inquietos debido al hecho de que la mayoría redondea el tamaño de la fuente al valor entero más cercano.
Entonces por ejemplo.
var zoom = 1.02;
var font_size = 12;
context.font = (font_size * zoom) + "px Arial"; // 12.24px
zoom = 1.04 (12.48px) representaría lo mismo que el código anterior, mientras que el zoom = 1.06 (12.75px) se redondearía a 13px.
Esto dio como resultado un salto muy indeseable del tamaño de la fuente entre los valores, mientras que todos los demás elementos del lienzo se escalaron correctamente.
El problema se agravó por el hecho de que todos los navegadores representan una cadena de texto dada como "TEXTO DE EJEMPLO" y longitudes ligeramente diferentes.
La solución
Durante la inicialización, renderice el texto con el tamaño de fuente estándar (zoom = 1) y mida la longitud de la línea, deje que este valor se llame iniLineLength
Durante la representación de escenas, utilicé un lienzo oculto para representar el texto y luego utilicé drawImage en el lienzo principal con un multiplicador en el ancho.
tmpContext.font = (font_size * zoom) + "px Arial";
tmpContext.fillText(MyLineOfText,0, 0);
var s = (iniLineLength * zoom) / tmpContext.measureText(MyLineOfText) ;
mainContext.drawImage(tmpCanvas,x, y, pw * s, ph);
La línea de texto resultante se estira o contrae en el lienzo principal de acuerdo con la distancia de la longitud de la línea esperada.
En un mundo ideal, s siempre sería igual a uno ya que la longitud de línea esperada siempre sería la misma que la longitud de línea real. La longitud de línea esperada es nuestra longitud de línea de muestra iniLineLength multiplicada por el mismo factor de zoom que nuestro tamaño de fuente en este pase de procesamiento.
Además de todo esto, tengo el efecto de normalizar todas las diferencias en el comportamiento del navegador ... casi.
Cuestiones
Incluso con la longitud de línea normalizada, la posición exacta de cada personaje en la línea no es la misma. Dando el efecto en la imagen de abajo.
Sin embargo, esto ya es una gran mejora en lo que tenía.
Además, querrás recortar tus tmpCanvas en MainCanvas o, de lo contrario, tu navegador se detendrá cuando intente crear y copiar el valor de texto de megapíxeles, solo por el hecho de tener un personaje a pantalla completa.
Teniendo esto en cuenta, también puede establecer el ancho y alto de su lona tmp según sea necesario para adaptarse a la línea de texto real que va a procesar, esto ahorrará memoria, tiempo, etc.
Tengo un problema con la forma en que diferentes navegadores representan tamaños de fuente en el lienzo HTML5. Específicamente, donde los tamaños de fuente no son números enteros. Por ejemplo, "8.5px Arial", "2.23em Arial", etc.
Para canvas.font = FontSize + "px Arial"; donde FontSize es (8.1, 8.2, 8.3, ...) esperaría un resultado lineal, ¡sin embargo, el único navegador que archiva de manera consistente es IE! ( Lo sé ). Firefox redondea menos de 11.2px pero es lineal más allá de eso. Chrome y Safari solo escalan fuentes a valores enteros.
La regla de redondeo parece configurarse en píxeles y redondea al entero más cercano por debajo de .5
Mi aplicación de lienzo está realizando algunas transformaciones animadas programáticas (escala y traducción). Tratando de evitar las transformaciones de lienzo por el bien de la eficiencia, aunque sospecho que resolvería el problema, tampoco he probado esto configurando el tamaño de texto html con solo CSS3 (eso se supone que el Canvas.font se basa en según las especificaciones)
Los navegadores son al menos consistentes en el comportamiento entre pt, px, em y% de los tamaños de fuente. [Editar: excepto que Safari no representa el% de tamaños]
[un lado: todas las fuentes se ven un poco audaces una vez explotaron un poco. Safari toma ese pastel a medida que avanzamos de 17.4 px a 17.5 px ... BAMB!]
He adjuntado algunas imágenes de ejemplo a continuación, pero realmente me gustaría algunas ideas sobre cómo hacer que todos los navegadores se parezcan más a IE (de nuevo nunca pensé que diría eso). ¿Es esto un error o un estándar para renderizar fuentes?
aquí está mi código de prueba que se puede replicar para el caso de tamaño de fuente PX.
<!DOCTYPE html><html><head><script>
function display() {
var canvas = document.getElementById(''test'');
// For EM and % cases....
//canvas.style.font="5px Arial";
canvas.height = 1000;
var context = canvas.getContext(''2d'');
var minSize = 10;
var lineHeight = 100;
for(var a=minSize; a< 20; a+=0.1)
{
var font_size = Math.round(a*10000)/10000;
context.font = a + "px Arial";
context.fillText("A: EXAMPLE TEXT > " + font_size, 20, (font_size-minSize)*lineHeight);
}
}
</script></head><body onload="display()"><canvas id="test"></canvas></body></html>
Escala de píxeles Escala de puntos escala em - 1em = 5px Arial escala de porcentaje - 100% = 5px Arial