Question

我试图通过StackOverflow搜索类似的问题，但我似乎只能找到“如何在＆lt; canvas＆gt;中绘制文字”的问题（回答：fillText）或“我如何制作清晰的线条”（答案，0.5坐标偏移，因为画布不是整数像素网格），这两个都没有回答我的问题。以下是：

当浏览器将文本呈现为普通页面的一部分时，如何使fillText将文本呈现为清晰？

作为演示，请使用http://processingjs.nihongoresources.com/fontreftest/crisptest上的页面，该页面使用以下html + js（使用html5 doctype）：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>fillText</title>
    <style type="text/css">
      canvas { margin: 0px; padding: 0px; display: block; }
    </style>
  </head>
  <body>
    <table><tr><td style="font: normal normal 400 12px/14px Arial">
      <div>This is some text in Arial.</div><div>This is some text in Arial.</div>
      <div>This is some text in Arial.</div><div>This is some text in Arial.</div>
      <div>This is some text in Arial.</div><div>This is some text in Arial.</div>
      <div>This is some text in Arial.</div><div>This is some text in Arial.</div>
      <div>This is some text in Arial.</div><div>This is some text in Arial.</div>
    </td><td>
      <canvas id="filltext0"></canvas><canvas id="filltext1"></canvas>
      <canvas id="filltext2"></canvas><canvas id="filltext3"></canvas>
      <canvas id="filltext4"></canvas><canvas id="filltext5"></canvas>
      <canvas id="filltext6"></canvas><canvas id="filltext7"></canvas>
      <canvas id="filltext8"></canvas><canvas id="filltext9"></canvas>
    </td><tr></table>
    <script type="text/javascript"><!--
      function drawTextIn(which)
      {
        var tstring = "This is some text in Arial",
            canvas = document.getElementById('filltext' + which),
            context = canvas.getContext("2d");
        var fontCSS = "normal normal 400 12px/14px Arial";
        context.font = fontCSS;
        canvas.width = context.measureText(tstring).width;
        canvas.height = 14;
        // setting the width resets the context, so force the font again
        context.font = fontCSS;
        context.fillText(tstring,0 + i/10,12);
      }
      for(var i=0; i<10; i++) { drawTextIn(i); }
    --></script>
  </body>
</html>

这将生成一个并排视图，显示浏览器在Arial中以12px呈现的十条线条，线条高度（大小+前导）为14px，采用正常样式和重量，十条线条呈现相同的字体属性使用＆lt; canvas＆gt;元素，每行调用fillText，x移位x坐标。第一行有x坐标0，第二行有0.1，第三行有0.2等等。

目前没有支持＆lt; canvas＆gt;的浏览器我试过（Chrome 12，Firefox 5，Opera 11.50，Internet Explorer 9，Safari 5）渲染文本与真实文本相同，无论x坐标移位。

所以我现在想知道的主要问题是，是否存在一种（正常，快速）方式使浏览器将文本绘制到＆lt; canvas＆gt;当它只是放置文本时，它与文本在页面上绘制相同的清晰度。

我看过http://diveintohtml5.ep.io/canvas.html#text，http://blog.thesoftwarefactory.be/2009/04/drawing-crisp-lines-on-html5-canvas.html，http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and和http://www.bel.fi/~alankila/lcd/ - 这些都没有涵盖这个主题。最后一个提供了一个有趣的方法，但是只有在画布为空时才能使用，这个方法太有限，无法实际使用，整洁如实（为每行文本构造一个新画布太昂贵了），调用fillText然后使用扫描线清理它，然后使用alpha混合复制文本。

所以......这可以吗？如果你知道如何，我真的非常想知道如何实现这一目标。如果您认为答案是否定的：请包含官方规格的链接，以证明为什么答案是正确的答案...我需要官方规范的安心，说我不能做我想要的，或者我我会一直想知道一些更聪明的人是否可能用“是”= P

来回答这个问题

Answer 1

所以我现在想知道的主要问题是，是否存在一种（正常，快速）方式使浏览器绘制文本时具有相同的清晰度，因为它只是在放置文本时将文本绘制到页面。

简单的回答很可悲。不同的浏览器目前正在以截然不同的方式为文本实现子像素渲染/消除锯齿，这导致（对于某些浏览器）它们呈现的HTML页面文本看起来很好但是它们的Canvas文本看起来很糟糕。

一种可能性是预渲染所有文本（即使这意味着将其写在HTML页面上并截取屏幕截图）并使用drawImage。这也比调用drawText快得多，但当然不是很有活力。

Answer 2

虽然问题很严重，但我遇到了同样的问题。在挖掘FireFox时，我找到了一个用于画布的旗帜：mozOpaque。设置后，字体使用正确的LCD渲染，文本像页面上的其他元素一样清晰。要测试它，只需输入：

canvas.mozOpaque = true;

创建画布后

。有一个问题：画布不再是透明的，但它不是我使用的问题。可能是Chrome / Safari / IE得到了类似的东西。我希望这有帮助！

画布context.fillText可以变得清晰（因为context.translate 0.5 / 0.5不会）

2 个答案: