Javascript chrome中的HTML5画布文本消除别名，而不是firefox中的文本消除别名
我正在用JavaScript在HTML5画布上绘制一个自定义的单间距位字体，我在Firefox和Chrome之间得到了不同的结果。Firefox以我喜欢的方式绘制： 虽然Chrome使用抗锯齿绘制，但我不知道如何消除： 用CSS和JavaScript重现问题的HTML代码如下Javascript chrome中的HTML5画布文本消除别名，而不是firefox中的文本消除别名,javascript,html,canvas,cross-browser,html5-canvas,Javascript,Html,Canvas,Cross Browser,Html5 Canvas,我正在用JavaScript在HTML5画布上绘制一个自定义的单间距位字体，我在Firefox和Chrome之间得到了不同的结果。Firefox以我喜欢的方式绘制： 虽然Chrome使用抗锯齿绘制，但我不知道如何消除： 用CSS和JavaScript重现问题的HTML代码如下 @字体{ 字体系列：tis-100-copy； src：本地（“tis 100副本”）， 本地（“tis-100-副本”）， 网址（tis100copy.ttf）； 字体大小：粗体； } html{ 位置：相对位置；
@字体{
字体系列：tis-100-copy；
src：本地（“tis 100副本”），
本地（“tis-100-副本”），
网址（tis100copy.ttf）；
字体大小：粗体；
}
html{
位置：相对位置；
背景色：#DDDDDD；
字体系列：tis-100-copy；
}
帆布游戏{
位置：相对位置；
左侧填充：0；
右边填充：0；
左边距：自动；
右边距：自动；
显示：块；
}
var canvas=document.getElementById（“游戏”）；
var ctx=canvas.getContext（“2d”）；
//ctx.translate（0.5,0.5）；//只会导致两个浏览器都使用反别名
ctx.mozImageSmoothingEnabled=false；
ctx.webkitmagesmoothingEnabled=假；
ctx.msImageSmoothInEnabled=false；
ctx.imageSmoothingEnabled=假；
ctx.font=“12pt tis-100-copy”；
函数gameLoop（）{
ctx.beginPath（）；
ctx.fillStyle=“#000000”；
ctx.fillRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle=“#FFFFFF”；
fillText（“敏捷的棕色狐狸跳过懒狗。”，50，50）；
ctx.fillText（“1234567890”，50，62）；
ctx.fillText（“！\\\%（）+，-./：？[\\]\”，50,74）；
requestAnimationFrame（gameLoop）；
}
requestAnimationFrame（gameLoop）；
如何让Chrome在不消除锯齿的情况下清晰地绘制文本？查看答案，您可能会发现一些有用的东西。不幸的是，我无法尝试使用您的字体，因此我无法找到更多信息。要解决此问题以实现跨浏览器兼容性，并且考虑到它显然用于游戏，我建议使用另一种方法，将其转换为位图字体 您可以将有问题的字体添加到精灵工作表中，然后构建一个简单的自定义函数来呈现文本 如果不需要呈现大量文本，则该过程非常简单，性能也非常充分 基础知识 以下是一个例子：
- 该字体被转换为位图字体，基本上是一个单间距的精灵表，按大小优化（并在这里转换为数据uri）
- 重要提示：生成时，仅呈现32（空格）以内的ASCII字符，最多为128字符
- 自定义函数用于解析字符串中的每个字符。字符被转换为ASCII索引，并减去32，因为我们在制作精灵表时跳过了这一点
- 计算精灵工作表中的区域，然后在当前位置（x+字符串索引*字符宽度，y原样）直接渲染到画布
//注意：字体精灵表是使用以下方法预先制作的：
// https://jsfiddle.net/epistemex/bdm3tbtu/
var-ctx，cw=8，ch=19，img=新图像；img.onload=go；img.src=bmp；
函数go（）{
ctx=c.getContext（“2d”）；
//自定义文本绘图功能演示：
myFillText（ctx，“我的自定义文本填充函数”，12,8）；
};
函数myFillText（ctx、str、x、y）{
x |=0；y |=0；//强制x/y到整数位置
for（变量i=0，ascii；i
var bmp=“数据：图像/png；base64，Ivborw0kgoaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa6.一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市一个城市的的+jJHRYXckH8sNyYR82.在一份研究报告中，一份研究报告提出了一份研究报告。一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究报告中的一份研究的一份研究报告中的一份研究报告中的一份研究。一份研究报告中的一份研究报告中的一份研究的一份研究报告中的一份研究报告中的一份研究报告中的一份研究的一份研究报告中的一份研究报告中的一份研究报告中的一份研究的一份研究的一份研究报告中的一份研究报告中的一份研究的一份研究的一份研究的一份研究报告中的一份研究报告中的一份研究的一份研究的一份研究QPQFHMMV+ZhPROjkGTMbfX/MHM78+f19xwKKKaZN5hdu+zvdiHux2tO+Ir+Beayrt6xyxuojuw2Gx1DWCDLYMZT0JDCPxJ00GAH4K/D/XFW53YLVTOL3ThuyOpopioyGxSqV7YE7966BNecr59V4MPb0b0th/tsgAdWiDRyYa0N+2ZaxNzlddzFHFH4Bujpwy+OSQ1M8Arvo0DkQdQdjDjDjDjDjdVwVwLvLpLpLpLpLpLfLfLfLfLfLfLfLfLf/IdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCdCd；
ctx.font=“12px tis-100-copy";为了得到同样大小的文本，我不得不使用16px，不，它没有解决问题。我已经安装并试用了字体。像素大小有问题，只有一对一像素大小的大小是16px，但对齐不正确（字体的左上像素位置错误）。唯一可以尝试的其他方法是尝试对齐选项（ctx.textAlign），并将字体位置偏移一个像素的分数(
<!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>