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

我有点困惑的方式canvas元素反别名文本，并希望你们都可以帮助。

在下面的截图中，顶部的“快速布朗福克斯”是一个H1元素，最下面的是一个canvas元素，在其上面呈现文字。 在底部，您可以看到两个并排放大的“F”。注意H1元素如何与背景融合得更好：

这里是我用来渲染canvas文本的代码：

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

是否可以在canvas上呈现文本，使其看起来与H1元素相同？ 他们为什么不同？

Answer 1

现在可以通过创build一个不透明的canvas上下文来获得亚像素字体的渲染。 在Safari和Chrome中，您可以使用以下代码片段获取这个信息：

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

我从这个博客文章中find了这个。

Answer 2

回答我自己的问题：

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

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

唯一的问题是它在生产应用程序中执行得太慢。 如果有人跑得更快，请让我知道。

Answer 3

马特，我上星期坐在这个（相同/相似）问题上，在我看来，这是因为我testing的设备上像素密度的不同。 我今晚写了 – 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

这是一种对任何canvas内容（文本，图像，vector等）进行亚像素渲染的方法。 http://johnvalentine.co.uk/archive.php?art=tft 。

方法的概要

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

有微调的空间，但是对于一个简单的方法来说，这是一个巨大的收获。

Answer 5

这通常称为子像素反锯齿 ，或Windows上的ClearType 。 我不知道当前支持Canvas的任何操作系统/浏览器组合。

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

编辑 ：我的假设是错的; Safari，Chrome和Firefox都会使用一些像素字体提示。 Safari和Chrome看起来是一样的，捕捉整个像素的边界，但不同于Firefox（捕捉到半像素边界？）。 在这里查看testing的可视化结果（在OS X上）： http : //phrogz.net/tmp/canvas_text_subpixel.html