Firefox 畫布 2d 文本半透明效果不同於 chrome

Question

我有一種情況，我使用 canvas 元素繪制矩陣效果，並且矩陣代碼文本的顏色在 Firefox 中比 Chrome 更亮更清晰：

如您所見，Chrome 中的文本更平滑，有些模糊，這正是我想要的。

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

我唯一能猜到的可能是Firefox不喜歡實現半透明效果的方式：

//Black BG for the canvas
//translucent BG to show the 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 中的這種行為？

編輯：

具有半透明效果的繪圖代碼：

//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);

最新的火狐版本： 49.0.2

編輯2：

在另一台裝有 Firefox 39 和舊 17" TFT 屏幕的計算機上檢查它。Firefox 仍然沒有半透明效果，字母明亮清晰：

更新：

這似乎是 Windows Firefox/Chrome 的行為，在 macOS 版本上不會發生。 這是在 macOS Mountain Lion 上打開的兩個瀏覽器的圖像鏈接： macOS ML Screenshot

更新2：

經過一些搜索和測試，事實證明這是一個字體問題以及 Chrome 如何呈現字符：

對我來說，這看起來像是一種完全不同的字體。 Chrome 使用尖頭呈現字母，但 Firefox 使用更堅實和大膽的效果。 只是嘗試更改ctx.font上的字體，如ctx.font = "normal normal " + font_size + "px arial"但它沒有任何區別。

Answer 1

正如您在上次更新時意識到的那樣，不能保證跨瀏覽器和操作系統產生相同（像素級）的結果。

涉及的因素是瀏覽器、操作系統和字體。

渲染字體的算法可能（通常）不同。

一些瀏覽器使用操作系統來渲染字體，而另一些瀏覽器（在某些操作系統上）則使用自己的渲染實現來渲染字體。

字體越小，差異越明顯。

另見： 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到z ASCII 字符：

我最終得到的字體文件大小為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：

您可以在此處查看演示頁面和源代碼。

注意，字體必須完全加載，否則瀏覽器將繪制相應的 ASCII 字符[A-Za-z]直到加載字體：

也許整個事情對於這樣一個細節來說是一種矯枉過正和太多的工作，但至少我想知道如何使這樣的東西對所有瀏覽器都有相同的效果。