Question

我对canvas元素反锯齿文本的方式有点困惑，希望你们都能帮忙。

在下面的屏幕截图中，顶部的“Quick Brown Fox”是一个H1元素，底部的是一个在其上呈现文本的canvas元素。在底部你可以看到两个“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})

我是从blog post找到的。

Answer 2

回答我自己的问题：

可以使用本网站上演示的技术：

https://bel.fi/alankila/lcd/

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

Answer 3

Matt，我上周遇到了（相同/类似）问题，在我看来，这是由于我测试的设备上像素密度的差异;我今晚写了这篇文章 - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

posterous的链接已经死了，所以这里有源代码的要点： 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上通常称为subpixel anti-aliasing或ClearType。我不知道目前支持Canvas的任何操作系统/浏览器组合。

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

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

HTML5的canvas元素上的子像素消除锯齿的文本

5 个答案:

方法概要