filltext() posición del texto del lienzo discrepancias entre navegadores

Question

Como se puede ver en las capturas de pantalla en la parte inferior de la pregunta o yendo directly to the game. El texto se coloca de forma diferente dependiendo del navegador (Firefox 15.0.1 se representa de manera diferente que IE 9.9 y Chrome 21). llamada a dibujar función:

context.fillText(this.wlines[i], this.xcoord, this.ycoord + y + (t) * this.sizey); 

constructor del objeto:

function textItem(text, xcoord, ycoord, sizex, sizey,style, context) { 
this.wlines = []; 
this.text = text; 
this.xcoord = xcoord; 
this.ycoord = ycoord; 
this.sizex = sizex; 
this.sizey = sizey; 
this.style = style; 

if (text == null) { 
    text = ""; 
} 
var lines = text.split("~"); 
// this is first line text 
context.save(); 
if (this.style < 3) { 
    context.shadowOffsetY = 2; 
    context.font = 'bold 18px "palatino linotype"'; 
} else if (this.style == 4) { 
    this.font = '16px "palatino linotype"'; 
    this.shadowOffsetX = 2; 
    this.shadowOffsetY = 1; 
    this.shadowColor = "rgba(255,255,255,1)"; 
} 
if (this.style == 5) { 
    this.wlines.push(text); 
} else { 
    for (j = 0; j < lines.length; j += 1) { 
     var words = lines[j].split(" "); 
     var lastLine = ""; 
     var l = sizex; 
     var measure = 0; 
     for (i = 0; i < words.length; i += 1) { 
      var w = words[i]; 
      measure = context.measureText(lastLine + w).width; 
      if (measure < l) { 
       lastLine += (w + " "); 
      } else { 
       //this is body text 
       if (this.style == 6) { 
        lastLine += "..."; 
       } 
       this.wlines.push(lastLine); 
       lastLine = (w + " "); 
       if (this.style < 3) { 
        context.font = 'bold 14px "palatino linotype"'; 
       } 
      } 
      if (i == words.length - 1) { 
       this.wlines.push(lastLine); 
       break; 
      } 
     } 
    } 
} 
context.restore(); 
} 

texto, xcoorc, Ycoord, xsize, ysize son analizadas desde un archivo XML. El nombre compond en este ejemplo:

<sizex>196</sizex> 
<sizey>20</sizey> 
<xcoord>383</xcoord> 
<ycoord>14</ycoord> 

estilo es un valor definido en base a los efectos de texto deseado y el contexto es el contexto 2d de la tela para dibujar en (para efectos de estratificación).

Como se muestra, todos los valores son exactamente los mismos entre los navegadores. El único control que hago entre los navegadores es

<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/> 

en el encabezado de la página html.

Realmente no sé de dónde viene la discrepancia en la altura de la línea y se apreciará cualquier ayuda al respecto.

La discrepancia en la altura de la línea cambia según el texto, pero no de una manera que haya descubierto todavía. Si hay alguna información que he omitido, no dude en preguntar. ff: ff screen http://www.sunshinecompound.com/images/firefoxscreen.png Chrome: chrome screen http://www.sunshinecompound.com/images/googlescreen.png

Actualizar La solución para mi programa, al menos, era construir un desplazamiento uso. Además obtuve grandes aumentos de rendimiento al crear el objeto de texto y luego guardar el objeto de texto como una imagen. En FF, que era el navegador con la mayor desaceleración, vi un poco más de una disminución de 5 veces en el tiempo de ejecución general del programa. Esto a pesar de tener que volver a crear el objeto de texto cada vez que el texto cambia dinámicamente en el programa (cambio los contadores dinámicos por segundo y los efectos de desplazamiento del mouse cada 200ms, pero con el rendimiento que estoy obteniendo, probablemente pueda mejorarlo a 100ms).

Answer 1

Yep.

Se coloca de forma diferente, se aplica una escala diferente, se intercala de manera diferente, se alias de manera diferente e incluso se mide de forma diferente (como en measureText) entre los navegadores.

Si necesita consistencia píxel para su juego, entonces vamos a tener que usar imágenes en lugar de texto. Lo siento. :(

La única manera de hacer measureText consistente es comprobar la validez de cómputo.

La única manera de hacer fillText constante es el uso de imágenes en lugar de texto. It's must faster, anyway.

Ambos son insostenibles si el texto es extremadamente dinámico, pero si solo escribe, digamos, menos de 100 piezas de texto diferentes en su aplicación, las imágenes son probablemente la mejor opción.

De lo contrario, podría utilizar una fuente de píxeles generada a partir de una imagen (use drawImage con cada letra o palabra común) y esperar un buen rendimiento, almacenando en caché las cadenas más largas y comunes.