Javascript filltext（）画布文本在浏览器之间的位置差异

如问题底部的屏幕截图所示，或 . 文本的放置方式因浏览器而异（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();
}

function textItem（text、xcoord、ycoord、sizex、sizey、style、context）{
this.wlines=[]；
this.text=文本；
this.xcoord=xcoord；
this.ycoord=ycoord；
this.sizex=sizex；
this.sizey=sizey；
这个。风格=风格；
if（text==null）{
text=“”；
}
变量行=text.split（“~”）；
//这是第一行文本
context.save（）；
如果（此.style<3）{
context.shadowOffsetY=2；
context.font='bold 18px“palatino-linotype'；
}else if（this.style==4）{
this.font='16px“palatino-linotype'；
这个.shadowOffsetX=2；
this.shadowOffsetY=1；
this.shadowColor=“rgba（255255,1）”；
}
if（this.style==5）{
this.wlines.push（文本）；
}否则{
对于（j=0；j

text、xcoorc、ycoord、xsize、ysize都是从xml文件中解析出来的。本例中的组件名称：

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

196
20
383
14

样式是基于所需的文本效果定义的值，上下文是要绘制的画布的二维上下文（用于分层效果）

如图所示，浏览器之间的所有值完全相同。我在浏览器之间做的唯一检查是

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

在html页面的标题中

我真的不知道线的高度差异是从哪里来的，任何关于这个问题的帮助都将不胜感激

行高差异根据文本的不同而变化，但不是以我已经计算出的方式。如果有我遗漏的任何信息，请不要犹豫询问。 ff: 铬：

更新我的程序的解决方案至少是使用偏移量构建。此外，通过创建文本对象，然后将文本对象保存为图像，我获得了巨大的性能提升。在FF浏览器中，它是速度最慢的浏览器，我看到整个程序运行时间减少了5倍多一点。尽管每次在程序中动态更改文本时都必须重新创建文本对象（我每秒更改动态计数器，每200ms更改鼠标悬停效果，但以我目前获得的性能，我可能会将其提高到100ms）。

是的

在不同的浏览器之间，它的位置不同，缩放不同，内核不同，别名不同，甚至测量方式也不同（如

measureText

）

如果你需要游戏的像素一致性，那么你将不得不使用图像而不是文本。对不起(

使

measureText

一致的唯一方法是预计算

使

fillText

一致的唯一方法是使用图像而不是文本

如果文本非常动态，这两种方法都是站不住脚的，但是如果你只写过，比如说，你的应用程序中不到100条不同的文本，那么图像可能是你最好的选择

否则，您可以使用从图像生成的像素字体（将drawImage与每个字母或常用词一起使用），并希望性能正常，缓存较长的常用字符串。

肯定不理想（尽管我在做基础研究后所作的假设）。我们有数千行文字和动态文字。我们希望能够使用文字效果。看来我将不得不为IE和Chrome使用偏移量（虽然效果不太理想，但可能足够接近），或者以图像形式提供字母表。感谢您的回复，确认了我预期的令人失望的结果。