HTML5 画布元素上的子像素抗锯齿文本

Question

我对画布元素抗锯齿文本的方式有点困惑，希望你们都能提供帮助。

在下面的屏幕截图中，顶部的“Quick Brown Fox”是一个 H1 元素，底部的元素是一个画布元素，上面渲染有文本。在底部，您可以看到两个“F”并排放置并放大。注意 H1 元素如何与背景更好地融合：

这是我用来渲染画布文本的代码：

        var canvas = document.getElementById('canvas');
        if (canvas.getContext){

            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'black';
            ctx.font = '26px Arial';
            ctx.fillText('Quick Brown Fox', 0, 26);
        }

是否可以在画布上渲染文本，使其看起来与 H1 元素相同？为什么它们不同？

Answer 1

现在可以通过创建不透明的画布上下文来获得子像素字体渲染。在 Safari 和 Chrome 中，您可以使用以下代码片段获取此内容：

var ctx = canvas.getContext("2d", {alpha: false})

我从此 博客文章。

Answer 2

回答我自己的问题：

可以使用 此网站。

唯一的问题是它在生产应用程序中实现起来太慢。如果有人跑得更快，请告诉我。

Answer 3

马特，上周我遇到了（相同/相似）的问题，就我而言，结果是由于我正在测试的设备上的像素密度存在差异；我今晚写了关于它的文章 - http://joubert .posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

海报上的链接已失效，所以这里是源代码的要点：
https://gist.github.com/joubertnel/870190

代码片段本身：

  // Output to Canvas without consideration of device pixel ratio
  var naiveContext = $('#naive')[0].getContext('2d');    
  naiveContext.font = '16px Palatino';
  naiveContext.fillText('Rothko is classified as an abstract expressionist.', 10, 20);

  // Output to Canvas, taking into account devices such as iPhone 4 with Retina Display
  var hidefCanvas = $('#hidef')[0];
  var hidefContext = hidefCanvas.getContext('2d');

  if (window.devicePixelRatio) {
    var hidefCanvasWidth = $(hidefCanvas).attr('width');
    var hidefCanvasHeight = $(hidefCanvas).attr('height');
    var hidefCanvasCssWidth = hidefCanvasWidth;
    var hidefCanvasCssHeight = hidefCanvasHeight;

    $(hidefCanvas).attr('width', hidefCanvasWidth * window.devicePixelRatio);
    $(hidefCanvas).attr('height', hidefCanvasHeight * window.devicePixelRatio);
    $(hidefCanvas).css('width', hidefCanvasCssWidth);
    $(hidefCanvas).css('height', hidefCanvasCssHeight);
    hidefContext.scale(window.devicePixelRatio, window.devicePixelRatio);               
  }

  hidefContext.font = "16px Palantino";
  hidefContext.fillText("Rothko is classified as an abstract expressionist.", 10, 20);

Answer 4

这是对任何画布内容（文本、图像、矢量等）进行子像素渲染的方法。 http://johnvalentine.co.uk/archive.php?art=tft 。

方法概要

它绘制到画布上，然后绘制到屏幕上以利用 RGB 条纹子像素。它也适用于 Alpha 通道。请注意，如果您使用纵向显示器、非条纹像素，或者您的浏览器以低于显示器的分辨率显示画布，则此功能可能不起作用。

虽然还有微调的余地，但对于简单的方法来说这是一个很大的收获。

Answer 5

这通常称为子像素抗锯齿，或子像素抗锯齿。 Windows 上的 microsoft.com/typography/cleartype/tuner/step1.aspx" rel="nofollow">ClearType。我不知道目前有任何操作系统/浏览器组合支持 Canvas。

我有兴趣看到一些使用文本子像素偏移的测试，看看是否有浏览器甚至使用基于像素的字体渲染提示（例如，在像素边界上对齐上升部分）。我的假设是否定的。

编辑：我的假设是错误的； Safari、Chrome 和 Firefox 似乎都使用了一些像素字体提示。 Safari 和 Chrome 看起来相同，都捕捉到整个像素边界，但与 Firefox 不同（捕捉到半像素边界？）。请在此处查看测试的视觉结果（在 OS X 上）：http://phrogz.net/tmp/canvas_text_subpixel。 html

Answer 6

您可以使用相当简单的技术使字体更加清晰。

您可以在 CSS 中将画布缩放为两倍：

canvas {
    transform-origin: left top;
    transform: scale(0.5);
}

在 HTML 中将画布尺寸加倍：

<canvas width="(width*2)" height="(height*2)">

最后以双倍大小在画布上绘制所有内容。

你会发现字体清晰多了。

这与 HTML 中的 H1 并不完全相同，但看起来比正常的字体渲染要好得多。