filltext（）キャンバステキストのブラウザ間の位置の不一致

Question

質問の末尾にあるスクリーンショットや、 directly to the gameのように表示されます。 テキストはブラウザによって異なるように配置されます（firefox 15.0.1はIE 9.9とChrome 21とは異なったレンダリングを行います）。 コール機能を描画する：オブジェクトの

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

はコンストラクタ：

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(); 
} 

テキスト、xcoorc、YCOORD、XSIZE、YSIZEは、XMLファイルから解析されています。この例ではcompond名：

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

様式は、所望のテキスト効果に基づいて定義された値であり、コンテクストは、（効果を積層するため）に描画するキャンバスの2Dコンテキストです。

表示されているように、すべての値はブラウザ間でまったく同じです。ブラウザ間で行う唯一のチェックは、htmlページのヘッダーにある

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

です。

私は本当に行の高さの不一致がどこから来ているのか分かりませんし、問題についての助けに感謝します。

行の高さの不一致は、テキストによって異なりますが、私はまだ分かりません。省略した情報がある場合は、お気軽にお問い合わせください。 FF： ff screen http://www.sunshinecompound.com/images/firefoxscreen.png クローム： chrome screen http://www.sunshinecompound.com/images/googlescreen.png

更新私のプログラムのための解決策は、少なくともオフセットの使用を構築することでした。さらに、テキストオブジェクトを作成し、テキストオブジェクトをイメージとして保存することで、パフォーマンスが大幅に向上しました。最大の減速度を持つブラウザであったFFでは、プログラムの実行時間が全体で5倍以上減少しました。これは、プログラム内でテキストが動的に変更されるたびにテキストオブジェクトを再作成する必要があるにもかかわらず（私は毎秒動的カウンタを変更し、200msごとにマウスのホバー効果を変更しますが、現在は100msまで向上させることができます。

Answer 1

異なった位置に配置され、異なる縮尺で、別々にカーニングされ、異なるエイリアスになり、ブラウザ間で（measureTextのように）別々に測定されます。

あなたはがあなたのゲームのためのピクセルの一貫性は、あなたがテキストの代わりに画像を使用する必要があるとしている必要がある場合。ごめんなさい。 :(fillTextの一貫性を保つために

measureTextに一貫性を持たせるための唯一の方法は、事前に計算することである。

唯一の方法は、テキストの代わりに画像を使用することです。It's must faster, anyway。

これらの両方があれば受け入れがたいですテキストは非常に動的ですが、あなたのアプリに100種類未満のテキストしか書いていない場合は、イメージがおそらく最良の賭けです。

それ以外の場合は、イメージから生成されたピクセルフォントを使用することができます（各文字または共通語とともにdrawImageを使用します）。