HTML5 canvas 文本 anti-aliases 在 chrome 中，不在 firefox 中
HTML5 canvas text anti-aliases in chrome, not in firefox
我正在使用 JavaScript 将自定义等宽位字体绘制到 HTML5 canvas，并且我在 Firefox 和 Chrome 之间得到了不同的结果。 Firefox 正在按照我喜欢的方式绘制它：
虽然 Chrome 用 anti-aliasing 绘制它，但我不知道如何摆脱它：
使用 CSS 和 JavaScript 重现问题的 HTML 代码如下。 (Font download).
<!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 在没有 anti-aliasing 的情况下干净地绘制文本？
查看答案 here，您可能会发现一些有用的东西。不幸的是我不能用你的字体试试，所以我找不到更多信息。
为了解决这个问题以实现跨浏览器兼容性，并考虑到它显然用于游戏，我建议采用不同的方法，将其转换为位图字体并将其用作位图字体。
您可以 convert 将有问题的字体设置为 sprite-sheet，然后构建一个简单的自定义函数来呈现文本。
过程简单，如果没有大量文本需要渲染，性能也绰绰有余。
基础知识
这是一个例子：
- 字体转换为位图字体，基本上是单声道-spaced sprite-sheet，优化大小（并在此处转换为数据 uri）。
- 重要提示：生成时仅呈现 32 个（space）的 ASCII 字符，最多并包括 128 个字符。
- 创建了一个自定义函数来解析字符串中的每个字符。 char 被转换为 ASCII 索引并减去 32，因为我们在制作 sprite-sheet.
时跳过了它
- sprite-sheet中的一个区域被计算出来，然后直接渲染到当前位置的canvas（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>
如何处理不同的颜色（或渐变、图案）
可以进行一些简单的修改以允许颜色、渐变、图案等。
- 创建一个屏幕外-canvas与精灵相同的大小-sheet
- 在图像中绘制
- Select合成模式“source-atop”，select颜色（或渐变，图案）并填充整个屏幕外-canvas。现在像以前一样继续，但使用 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>
一些优化可以通过例如将常见的 单词 预渲染到单独的 sprite-sheet 中获得，然后在自定义文本函数中对此进行检测。
我正在使用 JavaScript 将自定义等宽位字体绘制到 HTML5 canvas，并且我在 Firefox 和 Chrome 之间得到了不同的结果。 Firefox 正在按照我喜欢的方式绘制它：
虽然 Chrome 用 anti-aliasing 绘制它，但我不知道如何摆脱它：
使用 CSS 和 JavaScript 重现问题的 HTML 代码如下。 (Font download).
<!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 在没有 anti-aliasing 的情况下干净地绘制文本？
查看答案 here，您可能会发现一些有用的东西。不幸的是我不能用你的字体试试，所以我找不到更多信息。
为了解决这个问题以实现跨浏览器兼容性，并考虑到它显然用于游戏，我建议采用不同的方法，将其转换为位图字体并将其用作位图字体。
您可以 convert 将有问题的字体设置为 sprite-sheet，然后构建一个简单的自定义函数来呈现文本。
过程简单，如果没有大量文本需要渲染，性能也绰绰有余。
基础知识
这是一个例子：
- 字体转换为位图字体，基本上是单声道-spaced sprite-sheet，优化大小（并在此处转换为数据 uri）。
- 重要提示：生成时仅呈现 32 个（space）的 ASCII 字符，最多并包括 128 个字符。
- 创建了一个自定义函数来解析字符串中的每个字符。 char 被转换为 ASCII 索引并减去 32，因为我们在制作 sprite-sheet. 时跳过了它
- sprite-sheet中的一个区域被计算出来，然后直接渲染到当前位置的canvas（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>
如何处理不同的颜色（或渐变、图案）
可以进行一些简单的修改以允许颜色、渐变、图案等。
- 创建一个屏幕外-canvas与精灵相同的大小-sheet
- 在图像中绘制
- Select合成模式“source-atop”，select颜色（或渐变，图案）并填充整个屏幕外-canvas。现在像以前一样继续，但使用 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>
一些优化可以通过例如将常见的 单词 预渲染到单独的 sprite-sheet 中获得，然后在自定义文本函数中对此进行检测。