在 Chrome 中为 <canvas> 禁用 DirectWrite 和 ClearType答案

【问题标题】：Disable DirectWrite and ClearType for <canvas> in Chrome在 Chrome 中为 <canvas> 禁用 DirectWrite 和 ClearType
【发布时间】：2016-05-15 00:02:47
【问题描述】：

我需要在没有任何抗锯齿或 ClearType 的情况下将字体渲染到画布上。然后我需要将它们放大到另一个画布上一个整数因子，没有任何平滑。

从小画布缩放到大画布可以正常工作（通过在 2d 上下文中设置 imageSmoorthingEnabled = false），但是我无法弄清楚如何在不为整个浏览器和操作系统禁用的情况下禁用抗锯齿 / ClearType .

如果我没有在操作系统中禁用 ClearType，并在 Chrome 中禁用 DirectWrite (chrome://flags#disable-direct-write)，我会得到下面第一张图片的结果。两者都被禁用，我得到了想要的效果 - 请参阅第二个链接。

DirectWrite / ClearType 开启

DirectWrite / ClearType 关闭

虽然我有一个解决方法，但我真的在寻找一种方法来仅在画布级别禁用这些功能，这样我们就不需要要求我们的用户更改他们的操作系统和浏览器设置。

我不需要跨浏览器解决方案，Chrome 首选。

我的测试开发环境是 Windows 7 64 + Chrome 版本 49.0.2623.28 beta-m (64-bit)

** 编辑：添加了一个示例，说明为什么第一个答案不能解决问题：

示例位图字体为 21 像素。请注意，如果我们以该尺寸渲染它，然后放大 10 倍，您仍然可以看到平滑/抗锯齿效果。

@font-face {
  font-family: "vcr-osd-mono";
  src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf");
}
canvas {
  font-family: vcr-osd-mono
-webkit-font-smoothing: none;
}

<body onload="
var ctx = canvas.getContext('2d');
  ctx.font = '21px vcr-osd-mono';
  ctx.textBaseline = 'top';
  ctx.fillText(' ', 0, 0);
">

<button onclick="
var ctx = canvas.getContext('2d');
  ctx.font = '21px vcr-osd-mono';
  ctx.textBaseline = 'top';
  ctx.fillText('TESTING', 0, 0);

var ctx2 = canvas2.getContext('2d');
ctx2.imageSmoothingEnabled = false;
ctx2.scale(10,10);
ctx2.drawImage(canvas, 0, 0);
">Click</button><br/>

<canvas id="canvas" width="100" height="30"></canvas><br/>
<canvas id="canvas2" width="1000" height="300"></canvas><br/>
</body>

【问题讨论】：

您现在找到解决方案了吗？

标签： html google-chrome canvas

【解决方案1】：

我认为没有任何方法可以从 js 中禁用字体抗锯齿。

但既然您似乎想要一些像素化字体，为什么不简单地搜索/创建一些bitmap font 并将其直接绘制到主画布上？

然后，您只需将整个画布绘图重新绘制到第二张上，包括fillText()

window.onload = function() {
  setTimeout(function() {
    var ctx = canvas.getContext('2d');
    ctx.scale(10, 10)
    ctx.font = "10px vcr-osd-mono";
    ctx.textBaseline = "top";
    ctx.fillText('I am pixellated', 0, 0);
  }, 1000);
};

@font-face {
  font-family: "vcr-osd-mono";
  src: url("https://dl.dropboxusercontent.com/s/hsdwvz761xqphhb/pixel.ttf");
}
* {
  font-family: 'vcr-osd-mono';
}

&lt;canvas id="canvas" width="950" height="150"&gt;&lt;/canvas&gt;

【讨论】：

不幸的是，这仍然不起作用。我在原始问题中添加了代码来解释原因。
@KentW 已编辑，包括您需要在放大的画布上重绘（再次调用绘图命令）而不是调用 drawImage。