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

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})

我从这篇博文中找到了这个.

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);