我试图通过StackOverflow搜索类似的问题，但我似乎只能找到“如何在中绘制文本”（答案：fillText）或“如何生成清晰的线条”（答案：0.5坐标偏移，因为canvas不是整数像素网格）这两个问题都不能回答我的问题。具体如下：
如何使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>
这将生成一个并排视图，其中10行由浏览器以12像素的宋体显示，行高（大小+前导）为14像素，采用普通样式和权重，10行使用元素以相同的字体属性呈现，每行调用带有0.1位移x坐标的fillText。第一行有x坐标0，第二行有0.1，第三行有0.2，等等。
我尝试过的任何支持的当前浏览器（Chrome 12、Firefox 5、Opera 11.50、Internet Explorer 9、safari5）都不会将文本渲染为与真实文本相同的文本，而不考虑x坐标偏移。
所以我现在想知道的是，是否有一个（普通的，快速的）方法让浏览器将文本绘制到一个“画布”上，当它只是在放置文本时，它会把文本吸引到页面上。
我读过〈aa〉、〈aa〉、〈aa〉和〈aa〉——这些都不涉及这个主题。最后一个提供了一个有趣的方法，但是只能在画布为空的情况下使用，这太有限了，无法在现实世界中使用，尽管它很整洁（为每行文本构造一个新画布，调用fillTExt，然后使用扫描线清理它，然后使用alpha混合复制文本，代价太高）。
所以。。。。能做到吗？如果你知道怎么做，我真的，真的很想知道怎么做到这一点。如果你认为答案是否定的，请包括官方规范的链接，说明为什么答案是正确的。。。我需要一个官方规范的平和心态，说我不能做我想做的事，否则我会一直怀疑是否有更聪明的人会用“是”来回答这个问题
最佳答案
因此，我现在想知道的是，是否有一种（普通的，快速的）方法让浏览器将文本绘制成一个与它在放置文本时将文本绘制到页面上一样的清晰。
简而言之，答案很遗憾是否定的。不同的浏览器目前正在以完全不同的方式实现文本的亚像素呈现/消除混叠，这导致（对于某些浏览器而言）它们呈现的HTML页面文本看起来不错，但画布文本看起来很糟糕。
一种可能性是预先呈现所有文本（即使这意味着将其写在HTML页面上并截图），并使用drawImage。这还具有比调用drawText快得多的好处，但当然根本不是非常动态的。
关于javascript - 可以将canvas context.fillText变得清晰(因为context.translate 0.5/0.5不会)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6838461/