从问题底部的屏幕截图或 直接进入游戏中可以看出。文本的放置方式因浏览器而异(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();
}
text,xcoorc,ycoord,xsize,ysize 从 xml 文件中解析。本例中的化合物名称:
<sizex>196</sizex>
<sizey>20</sizey>
<xcoord>383</xcoord>
<ycoord>14</ycoord>
style 是基于所需文本效果的定义值, context 是要绘制的画布的 2d 上下文(用于分层效果)。
如图所示,所有值在浏览器之间完全相同。我在浏览器之间做的唯一检查是
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"/>
在html页面的标题中。
我真的不知道线高差异来自哪里,对此问题的任何帮助将不胜感激。
行高差异根据文本而变化,但不是以我尚未弄清楚的方式变化。如果有任何我遗漏的信息,请随时询问。ff: ff 屏幕 http://www.sunshinecompound.com/images/firefoxscreen.png Chrome: 镀铬屏幕 http://www.sunshinecompound.com/images/googlescreen.png
更新我的程序的解决方案至少是构建使用偏移量。此外,通过创建文本对象然后将文本对象另存为图像,我获得了巨大的性能提升。在 FF 中,它是最慢的浏览器,我看到整个程序运行时间减少了 5 倍多一点。尽管每次在程序中动态更改文本时都必须重新创建文本对象(我每 200 毫秒更改一次动态计数器和鼠标悬停效果,但根据我目前获得的性能,我可能会将其提高到 100 毫秒)。