Question

我有一种情况，我使用canvas元素绘制矩阵效果，并且在Firefox中，矩阵代码文本的颜色比chrome更亮更清晰：

正如您所看到的，Chrome中的文字更平滑，有些模糊，这就是我想要的。

HTML5矩阵效果：http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript

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

 <textarea id="q" name="q"></textarea>
 <button onclick='alert(rec);'>
 Click
 </button>
<script>
var rec;

$("#q").keyup(function(){
      rec = document.getElementById("q").value;
});
</script>

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

修改

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

//Black BG for the canvas
//translucent BG to show trail

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; //green text

最新的firefox版本： 49.0.2

EDIT2：

使用firefox 39和旧的17＆＃34;从另一台计算机上检查它。 TFT屏幕。 Firefox仍然没有半透明效果，字母明亮而清晰：

更新

这似乎是Windows Firefox / Chrome行为，在OSX版本上不会发生。以下是在OSX Mountain Lion上使用的两个浏览器的图像链接：OSX ML Screenshot

UPDATE2：

经过一些搜索和测试，结果证明这是一个字体问题以及chrome如何呈现字符：

对我看起来像一个完全不同的字体。 chrome使用尖端渲染字母，但firefox使用更加纯实和大胆的效果。只是尝试更改//drawing the characters function draw() { //Black BG for the canvas //translucent BG to show trail ctx.fillStyle = "rgba(0, 0, 0, 0.05)"; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = "#0F0"; //green text ctx.font = font_size + "px arial"; //looping over drops for(var i = 0; i < drops.length; i++) { //a random chinese character to print var text = chinese[Math.floor(Math.random()*chinese.length)]; //x = i*font_size, y = value of drops[i]*font_size ctx.fillText(text, i*font_size, drops[i]*font_size); //sending the drop back to the top randomly after it has crossed the screen //adding a randomness to the reset to make the drops scattered on the Y axis if(drops[i]*font_size > c.height && Math.random() > 0.975) drops[i] = 0; //incrementing Y coordinate drops[i]++; } } setInterval(draw, 33);上的字体ctx.font，但它没有任何区别。

Answer 1

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

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

渲染字体的algorythms可能（通常是）不同。

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

字体越小，差异越明显。

另请参阅：https://stackoverflow.com/a/30878469

我确认在提供的示例中，我在Mac OS X 10.9.5上获得了相同的结果。

但即使在Mac OS X上，我在使用不同的浏览器时也遇到了字体渲染的差异。

如果您需要在发布的情况下实现像素级别的一致性，您可以使用小的PNG-24图像（代表文本字符）而不是文本。事实上，只使用了几个不同的字符，这使得“精灵”与文本解决方案成为可能。

Answer 2

我采用了创建新字体的路径来减小字体大小。我用一些 Unicode中文符号替换了常规ASCII符号。我使用了这个尖尖的卷曲字体Sim Sun的一些字符，它几乎包含所有中文unicode字符，原始TTC文件大小为 13.4MB （仅供演示用途，我不知道它是否受版权保护）：

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

$.each(chinese.split(''), function(index, char) {
    console.log(char, char.charCodeAt(0).toString(16));
});

然后我将字体打开到字体编辑器，通过字符串十六进制代码搜索/查找，将中文字符复制/粘贴到从A到Z和a的标准ASCII字符z：

我的字体文件大小 25KB （OTF）。我使用https://www.fontsquirrel.com生成所有CSS兼容字体（EOT，SVG，TTF，WOFF，WOFF2，总大小 180KB ），下载包并将字体和CSS包含在演示html文件中。然后我只是将font-family名称更改为画布c.getContext("2d") ctx对象为新导入字体simsun_matrixregular的名称（导入字体的名称）：

ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px simsun_matrixregular";

并将中文字符串变量从真正的中文字符更改为ASCII [A-Za-z]：

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

现在一切都正常显示！ Windows中的Chrome和Firefox作为OSX中的Chrome和Safari，都显示相同的结果！（几乎相同。至少非常接近）

Windows 10，Chrome / Firefox：

OSX 10.11，Chrome / Safari：

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

警告，字体必须完全加载，否则浏览器将绘制相应的ASCII字符[A-Za-z]，直到加载字体为止：

对于这样的细节而言，这整件事情可能是一种过度杀伤和过多的工作，但至少我想知道如何制作这样的东西以对所有浏览器产生相同的效果。

Firefox canvas 2d文本半透明效果不同于chrome

2 个答案: