Javascript Firefox画布2d文本半透明效果与chrome不同

我有一种情况，我使用画布元素来绘制矩阵效果，并且Firefox中矩阵代码文本的颜色比Chrome更明亮、更锐利：

正如你所看到的，Chrome中的文本更平滑，有些模糊，这正是我想要的

HTML5矩阵效应：

我唯一能猜到的是，Firefox可能不喜欢半透明效果的实现方式：

//画布的黑色背景
//半透明背景以显示轨迹
this.ctx.fillStyle=“rgba（0,0,0,0.05）”；
this.ctx.fillRect（0，0，this.$c.width（），this.$c.height（））；
this.ctx.fillStyle=this.color//绿色文本

为什么会这样？除了为每个浏览器检测和设置不同的颜色外，有没有其他方法可以通过适当的方式修复firefox中的这种行为

编辑：

具有半透明效果的图形代码：

//绘制字符
函数绘图（）
{
//画布的黑色背景
//半透明背景以显示轨迹
ctx.fillStyle=“rgba（0,0,0,0.05）”；
ctx.fillRect（0，0，c.宽度，c.高度）；
ctx.fillStyle=“#0F0”；//绿色文本
ctx.font=font\u size+“px arial”；
//在水滴上循环
对于（变量i=0；ic.height&&Math.random（）>0.975）
滴[i]=0；
//递增Y坐标
滴[i]++；
}
}
设置间隔（绘制，33）；

最新firefox版本：49.0.2

EDIT2:

在另一台装有Firefox 39和旧的17英寸TFT屏幕的电脑上查看。Firefox仍然没有半透明效果，字母也很亮很尖：

更新：

这似乎是Windows Firefox/Chrome的行为，在macOS版本上不会发生。下面是在macOS Mountain Lion上打开的两种浏览器的图像链接：

更新2:

经过一些搜索和测试，发现这是一个字体问题以及Chrome如何呈现字符：

---

对我来说，这看起来像是一种完全不同的字体。Chrome使用尖头渲染字母，但Firefox使用了更为坚实和粗体的效果。只是尝试在

ctx.font

上更改字体，如

ctx.font=“normal normal”+font\u size+”px arial“

但它没有任何区别。

正如您在上次更新中意识到的那样，文本渲染不能保证在浏览器和操作系统之间产生相同的（像素级）结果

涉及的因素包括浏览器、操作系统和字体

呈现字体的算法可能（通常）不同

有些浏览器使用操作系统渲染字体，有些浏览器（在某些操作系统上）使用自己的渲染实现渲染字体

字体越小，差异越明显

另见：

我确认我在Mac OS X 10.9.5上得到了与所提供示例相同的结果

但即使在MacOSX上，我也体验过使用不同浏览器时字体呈现的差异

---

如果您需要在发布的情况下实现像素级的一致性，您可以使用小PNG-24图像（表示文本字符）而不是文本。

---

事实上，只使用了很少几个不同的字符，这使得“精灵”与文本解决方案成为可能。

我采用了创建新字体的方法来减小字体大小。我用一些Unicode中文符号替换了常规ASCII符号。我使用了这种尖头卷曲字体的一些字符，它几乎包含了所有的中文unicode字符，原始的

TTC

文件大小为13.4MB（这只是为了演示，我不知道它是否受版权保护）：

我可以使用任意随机汉字，但我使用此javascript控制台代码来获取我已经拥有的字符的相应unicode十六进制值：

$.each（chinese.split（“”），函数（index，char）{
log（char，char.charCodeAt（0.toString（16））；
});

然后我打开字体编辑器，按字符十六进制代码搜索/查找，将中文字符从

a

复制/粘贴到

Z

和

a

到

Z

：

最后，我得到的字体文件大小为25KB（

OTF

）。我曾经生成所有与CSS兼容的字体（

EOT

，

SVG

，

TTF

，

WOFF

，

WOFF2

，总大小180KB），下载该软件包，并将字体和CSS包含到一个演示html文件中。然后我将

字体系列

名称更改为canvas

c.getContext（“2d”）

ctx

对象，改为新导入字体的名称

simsun\u matrixregular

（导入字体的名称）：

并将中文字符串变量从实汉字更改为ASCII

[A-Za-z]

：

//var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
var chinese = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

现在一切都正常显示了！windows中的Chrome和Firefox以及OSX中的Chrome和Safari都显示相同的结果！（几乎相同，至少非常接近）

Windows10，Chrome/Firefox:

OSX 10.11，Chrome/Safari:

您可以查看演示页面和源代码

注意，字体必须完全加载，否则浏览器将绘制相应的ASCII字符

[A-Za-z]

，直到加载字体：

也许就是这个

//var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
var chinese = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";