chrome中的HTML5畫布文本抗鋸齒，而不是Firefox

Question

我正在使用 JavaScript 在 HTML5 畫布上繪制自定義等寬位字體，並且在 Firefox 和 Chrome 之間得到不同的結果。 Firefox 以我喜歡的方式繪制它：

雖然 Chrome 使用抗鋸齒繪制它，但我不知道如何擺脫：

鉻合金

使用 CSS 和 JavaScript 重現該問題的 HTML 代碼如下。 （字體下載）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        @font-face {
            font-family: tis-100-copy;
            src: local("tis 100 copy"),
                local("tis-100-copy"),
                url(tis100copy.ttf);
            font-weight: bold;
        }

        html {
            position: relative;
            background-color: #DDDDDD;
            font-family: tis-100-copy;
        }
        canvas#game {
            position: relative;
            padding-left: 0;
            padding-right: 0;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="game" width="1366" height="768"></canvas>
    <script>
        var canvas = document.getElementById("game");
        var ctx = canvas.getContext("2d");

        //ctx.translate(0.5, 0.5); // Just causes both browsers to anti-alias

        ctx.mozImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        ctx.font = "12pt tis-100-copy";

        function gameLoop() {

            ctx.beginPath();
            ctx.fillStyle = "#000000";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            ctx.fillStyle = "#FFFFFF";
            ctx.fillText("ThE qUiCk BrOwN fOx JuMpS oVeR tHe LaZy DoG.", 50, 50);
            ctx.fillText("1234567890", 50, 62); 
            ctx.fillText("!#%()+,-./:<=>?[\\]_", 50, 74);

            requestAnimationFrame(gameLoop);
        }
        requestAnimationFrame(gameLoop);
    </script>
</body>
</html>

如何讓 Chrome 在沒有抗鋸齒的情況下干凈地繪制文本？

Answer 1

為了解決這個問題以實現跨瀏覽器兼容性，並考慮到它顯然是用於游戲的，我會建議一種不同的方法，將其轉換為位圖字體並將其用作位圖字體。

您可以將相關字體轉換為 sprite-sheet，然后構建一個簡單的自定義函數來呈現文本。

這個過程很簡單，如果沒有大量的文本需要渲染，性能就綽綽有余了。

基礎知識

這是一個例子：

字體被轉換為位圖字體，基本上是一個等距的 sprite-sheet，按大小優化（並在此處轉換為 data-uri）。
重要提示：生成時，僅會呈現 32（空格）（包括 32 個空格）的 ASCII 字符，最多（包括 128 個字符）。
制作了一個自定義函數來解析字符串中的每個字符。 char 被轉換為 ASCII 索引並減去 32，因為我們在制作 sprite-sheet 時跳過了它。
計算 sprite-sheet 中的一個區域，然后在當前位置（x + string-index * character-width, y as-is）直接渲染到畫布上。

 // Note: font sprite-sheet premade using: // https://jsfiddle.net/epistemex/bdm3tbtu/ var ctx, cw = 8, ch = 19, img = new Image; img.onload = go; img.src = bmp; function go() { ctx = c.getContext("2d"); // Custom text drawing function demo: myFillText(ctx, "My custom text fill function", 12, 8); }; function myFillText(ctx, str, x, y) { x |= 0; y |= 0; // force x/y to integer positions for(var i = 0, ascii; i < str.length; i++) { // get ASCII code but offset -32 to match sprite-sheet ascii = str.charCodeAt(i) & 0xff - 32; // look-up bitmap font sprite-sheet and draw directly to canvas ctx.drawImage(img, ascii * cw, 0, cw, ch, x + i * cw, y, cw, ch); } }

 <canvas id=c width=600></canvas> <script> var bmp = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAATBAMAAAAXEGS4AAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACHRSTlMAljxY3CJ2uKuwIxoAAANySURBVFjD7VhNa9tAEH2SZUlH0ULPatJSH00/IEdBc8jREAg6OqSBHg29+LiR43R+djMfm9VXKKREDcRPrFc7mtGbeVptNsIBBxxwwP/GrMQBEyO53kNAt1BsdydoISrwPJgRbTA9Eq2nnpS7LiKWct/P5dte+6ujSsWu6q/t628vKzwH4htgUWJyfL7W3mE6xA0ioFcvAVnpkDtCfVwWYGRF8sku5pzg6RnGkBMBOfeOm/gT28hx77w9gDTOQe0f2FRZDIEsjpuMmZ/UmVx+b9eMuBkHfJ9bb4f52WG5CDimiCA4lpQm4Ue0QaTatgRkOwq95fcSgqz6deFVIkt4CEsCD3TI5ZetHfJA5gWA2ivURHf3Zj2srDASRw1QC8AyELyv9ebrKB8vHiSxzshnZbpq1T8JP1Kn4ifrrvgMfjoxLTkImFF5tgO8ksm7y4r7DvTmNhvIFPVnXfGZO9uL0YfKIC3jHTWhFD0gAhD6xXPTPGlQevAdKZ7V1FgTPwIKGAjT8GNm4ufLgfjiiuRGxVqcol6ZRjyOChsECI28a+jJHRYXckH8sNyYR87J5Oswj+DLBzceP1o8jRWPQfGSnnIpt9XzBrgKVUzDj2yt4qebjoZB/NnPDTumm5PlF4RkbX3XEQUlKecfczQivqwuZH8LqE9lwcAFfoAKEp+H4imMiVrFkwgonCIA1JfgY7rFW24S5+v392qDMA3/vIGKj8VqQev5iPhHDY/rMtkXPfFtYDAiYoJQFCdl9PZwtGcMZj4B57gD0WMzjzqvsl+P5Sy34pXtvheeQfFBeGnhCQRMxo9kqeLHFQpsb/tJuIvZx4YdT8pYL2pGI+IbF9NTeEi+tZM2RyNB517n8+axNVesw+L1l9AqPqfhmmv+ZhPROjkGTMbfX/MHM78+f19xwKKKaZN5hdu+zvdiHux2tO+Ir+beAyRt6XyXUUojuw2gX1DwCDLYmzT0JdcpXj00gaH4k/D/Xfw53YLVTOl3THuYvOPiOygxSQv7Ye7966bnECRNe59v4mPb0B0th/tsgAdWiDRyYa0N+2zAXnzlDdziZfHtfT4PBuJPwY+osq1m8aRvO0z5dKQjdDIJMvwLpLonQARRTMLf/idrcmRjKb7RyfgqMN+p+CcrvAxkFbDFK0GuH9ZezlyriV7RV+wIAX8AnAnL3b7xqFYAAAAASUVORK5CYII="; </script>

如何處理不同的顏色（或漸變、圖案）

可以進行一些簡單的修改以允許顏色、漸變、圖案等。

創建一個與 sprite-sheet 大小相同的屏幕外畫布
在圖像中繪制
選擇合成模式“source-atop”，選擇顏色（或漸變、圖案）並填充整個離屏畫布。 現在像以前一樣繼續，但使用 offscreen-canvas 作為圖像源而不是圖像本身。

 // Note: font sprite-sheet premade using: // https://jsfiddle.net/epistemex/bdm3tbtu/ var cw = 8, ch = 19, c2, img = new Image; img.onload = go; img.src = bmp; var ctx = c.getContext("2d"), ctx2; function go() { // setup offscreen-canvas c2 = document.createElement("canvas"); c2.width = this.width; c2.height = this.height; ctx2 = c2.getContext("2d"); ctx2.drawImage(this, 0, 0); myFontColor("#c00"); myFillText(ctx, "My custom text fill function in red...", 12, 8); }; function myFontColor(style) { ctx2.globalCompositeOperation = "source-atop"; ctx2.fillStyle = style; ctx2.fillRect(0, 0, c2.width, c2.height); } function myFillText(ctx, str, x, y) { x |= 0; y |= 0; for(var i = 0, ascii; i < str.length; i++) { ascii = str.charCodeAt(i) & 0xff - 32; ctx.drawImage(c2, ascii * cw, 0, cw, ch, x + i * cw, y, cw, ch); } }

 <canvas id=c width=600></canvas> <script> var bmp = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvgAAAATBAMAAAAXEGS4AAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACHRSTlMAljxY3CJ2uKuwIxoAAANySURBVFjD7VhNa9tAEH2SZUlH0ULPatJSH00/IEdBc8jREAg6OqSBHg29+LiR43R+djMfm9VXKKREDcRPrFc7mtGbeVptNsIBBxxwwP/GrMQBEyO53kNAt1BsdydoISrwPJgRbTA9Eq2nnpS7LiKWct/P5dte+6ujSsWu6q/t628vKzwH4htgUWJyfL7W3mE6xA0ioFcvAVnpkDtCfVwWYGRF8sku5pzg6RnGkBMBOfeOm/gT28hx77w9gDTOQe0f2FRZDIEsjpuMmZ/UmVx+b9eMuBkHfJ9bb4f52WG5CDimiCA4lpQm4Ue0QaTatgRkOwq95fcSgqz6deFVIkt4CEsCD3TI5ZetHfJA5gWA2ivURHf3Zj2srDASRw1QC8AyELyv9ebrKB8vHiSxzshnZbpq1T8JP1Kn4ifrrvgMfjoxLTkImFF5tgO8ksm7y4r7DvTmNhvIFPVnXfGZO9uL0YfKIC3jHTWhFD0gAhD6xXPTPGlQevAdKZ7V1FgTPwIKGAjT8GNm4ufLgfjiiuRGxVqcol6ZRjyOChsECI28a+jJHRYXckH8sNyYR87J5Oswj+DLBzceP1o8jRWPQfGSnnIpt9XzBrgKVUzDj2yt4qebjoZB/NnPDTumm5PlF4RkbX3XEQUlKecfczQivqwuZH8LqE9lwcAFfoAKEp+H4imMiVrFkwgonCIA1JfgY7rFW24S5+v392qDMA3/vIGKj8VqQev5iPhHDY/rMtkXPfFtYDAiYoJQFCdl9PZwtGcMZj4B57gD0WMzjzqvsl+P5Sy34pXtvheeQfFBeGnhCQRMxo9kqeLHFQpsb/tJuIvZx4YdT8pYL2pGI+IbF9NTeEi+tZM2RyNB517n8+axNVesw+L1l9AqPqfhmmv+ZhPROjkGTMbfX/MHM78+f19xwKKKaZN5hdu+zvdiHux2tO+Ir+beAyRt6XyXUUojuw2gX1DwCDLYmzT0JdcpXj00gaH4k/D/Xfw53YLVTOl3THuYvOPiOygxSQv7Ye7966bnECRNe59v4mPb0B0th/tsgAdWiDRyYa0N+2zAXnzlDdziZfHtfT4PBuJPwY+osq1m8aRvO0z5dKQjdDIJMvwLpLonQARRTMLf/idrcmRjKb7RyfgqMN+p+CcrvAxkFbDFK0GuH9ZezlyriV7RV+wIAX8AnAnL3b7xqFYAAAAASUVORK5CYII="; </script>

可以通過例如將常用詞預渲染到單獨的精靈表中來獲得一些優化，然后在自定義文本函數中檢測到這一點。

Answer 2

在這里查看答案，您可能會發現一些有用的東西。 不幸的是，我無法用你的字體嘗試它，所以我無法找到更多信息。

chrome中的HTML5畫布文本抗鋸齒，而不是Firefox

問題描述

2 個解決方案

解決方案1
2 已采納

基礎知識

如何處理不同的顏色（或漸變、圖案）

解決方案2
0 2017-11-06 15:16:39

chrome中的HTML5畫布文本抗鋸齒，而不是Firefox

問題描述

2 個解決方案

解決方案1 2 已采納

基礎知識

如何處理不同的顏色（或漸變、圖案）

解決方案2 0 2017-11-06 15:16:39

解決方案1
2 已采納

解決方案2
0 2017-11-06 15:16:39