HTML5 Canvas 中的像素字体已消除锯齿

Question

我正在尝试在 HTML5 画布上绘制 8 位像素文本。我试过了：

_context['imageSmoothingEnabled'] = false;
_context['mozImageSmoothingEnabled'] = false;
_context['oImageSmoothingEnabled'] = false;
_context['webkitImageSmoothingEnabled'] = false;
_context['msImageSmoothingEnabled'] = false;

以及其他一些与 HTML 和 CSS 字体有关的事情，同时谷歌搜索了一个多小时。这是字体：

@font-face {
    font-family: "undertalefont";
    src: url("bitops.ttf");
    font-style: normal;
    -webkit-font-smoothing: none;
}

当在 HTML 中使用它时，它会尝试使用奇怪形式的子像素抗锯齿。它可以按照图像编辑程序中的预期呈现字体。

所以我的问题是，我该如何阻止这个...（缩放到 200% 以查看坏的 AA）

并使其像素完美清晰？

编辑：我正在渲染文本：

_context.fillStyle = "white";
_context.font = "24px 'undertalefont'";
_context.fillText("Font rendering.", 32, 20);

Answer 1

您可以通过将画布元素及其中的项目的大小加倍，然后使用 CSS 缩小来实现相同的文本清晰度。

这是因为许多屏幕为每个像素渲染两个像素，本质上具有双倍的分辨率。

默认情况下，Canvas 无法访问文档渲染文本时所具有的像素缩放比例。

我通过在此处添加几行来修复@Pacerier jsfiddle。

所以画布元素从

<canvas id="myCanvas" width="200" height="100">no support</canvas>

到

<canvas id="myCanvas" width="400" height="200">no support</canvas>

我们添加一些 CSS：

<style>
  #myCanvas{
    width: 200px;
    height: 100px;
  }
</style>

然后，您必须将画布中渲染的所有内容的大小加倍，以便

ctx.font = "30px asd"

变成

ctx.font = "60px asd";

更多信息在此答案中。