filltext（）canvas文本位置瀏覽器之間的差異

可以在問題底部的屏幕截圖或 directly to the game中看到。文本放置依賴於瀏覽器（firefox 15.0.1呈現不同於IE 9.9和Chrome 21）。調用繪製函數：filltext（）canvas文本位置瀏覽器之間的差異

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文件解析。此示例中的複合式名稱：

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

樣式是基於文本效果定義的值所需的和上下文是畫布的2D上下文上繪製（爲分層效果）。

如所示，瀏覽器之間的所有值完全相同。我在瀏覽器之間做的唯一檢查是

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

在html頁面的標題中。

我真的不知道行高差異是從哪裏來的，如果對此事有任何幫助，我們將不勝感激。

線高差異根據文本而改變，但不是以我已經計算出來的方式改變。如果有任何我已經省略的信息，請不要猶豫，問。 FF： ff screen http://www.sunshinecompound.com/images/firefoxscreen.png 鉻： chrome screen http://www.sunshinecompound.com/images/googlescreen.png

更新我的程序的解決方案至少是建立使用偏移。此外，通過創建文本對象並將文本對象保存爲圖像，我獲得了巨大的性能提升。在FF最大的放緩瀏覽器中，我看到整體程序運行時間減少了5倍。這是儘管每次在程序中動態更改文本時都必須重新創建文本對象（我每秒更改動態計數器並每200ms更改一次鼠標懸停效果，但對於我目前獲得的性能，我可能可以將其提高到100ms）。

來源

2012-09-25 Tyler

截圖/ link？ – sq2

是的。

它的放置方式不同，縮放比例不同，區別不同，別名不同，甚至在瀏覽器之間以不同方式測量（如measureText）。

如果需要爲您的遊戲像素一致性那麼你將不得不使用而不是文本圖像。抱歉。 :(

使measureText一致的唯一方法是預先計算。

使fillText一致的唯一方法是使用而不是文本圖像。It's must faster, anyway。

這兩者都是站不住腳的，如果文字是非常動態的，但如果你只寫過，在你的應用程序中少於100個不同的文字，圖像可能是你最好的選擇。

否則，您可以使用從圖像生成的像素字體（對每個字母或常用單詞使用drawImage），並希望獲得良好性能，緩存較長的常用字符串。

來源

2012-09-26 02:44:21

絕對不是理想的（儘管我在做基礎研究之後所做的）。我們有數千行文字和動態文字。我們本來希望能夠使用文字效果。看起來我必須使用IE和Chrome的偏移量（不能很好地工作，但可能足夠接近），或者在圖像形式中使用字母表。感謝您的回覆，確認我的預期令人失望。 – Tyler

filltext（）canvas文本位置瀏覽器之間的差異

回答

相關問題