可以使画布context.fillText清脆（因为context.translate 0.5 / 0.5不） [英] Can canvas context.fillText be made crisp (because context.translate 0.5/0.5 doesn't)
问题描述
我试图通过StackOverflow搜索一个类似的问题，但我似乎只能找到问题是我如何在< canvas> （答案：fillText）或如何做出清晰的线（答案，0.5坐标偏移，因为画布不是一个整数像素网格），这两个都不回答我的问题。这是以下内容：
I've tried to search through StackOverflow for a similar question, but I seem to only be able to find questions that are either "how do I draw text in <canvas>" (answer: fillText) or "how do I make crisp lines" (answer, 0.5 coordinate offsets, because canvas isn't an integer pixel grid), neither of which answer my question. Which is the following:
如何获取fillText来渲染文本作为浏览器渲染文本作为正常页面的一部分的清脆？
How do I get fillText to render text as crisp as the browser renders text as part of a normal page?
作为演示，请参阅 http://processingjs.nihongoresources.com/ fontreftest / crisptest ，它使用以下html + js（使用html5 doctype）：
As a demonstration, take the page on http://processingjs.nihongoresources.com/fontreftest/crisptest, which uses the following html+js (using 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渲染的十行的并行视图在正常的样式和权重，使用< canvas>的十六行，使用相同的字体属性渲染的十字线（lineheight（size + leading）元素，每一行调用fillText与0.1移位x坐标。第一行有x坐标0，第二个0.1，第三个0.2等。
This will generate a side-by-side view of ten lines rendered by the browser in Arial at 12px with a lineheight (size+leading) of 14px, in normal style and weight, and ten lines rendered with the same font properties using <canvas> elements, with every line calling fillText with a 0.1 shifted x-coordinate. The first line has x coordinate 0, the second 0.1, the third 0.2, etc.
目前没有支持< canvas>我试过（Chrome 12，Firefox 5，Opera 11.50，Internet Explorer 9，Safari 5）会将文本与真实文本相同，而不考虑x坐标偏移。
No current browser that supports <canvas> that I have tried (Chrome 12, Firefox 5, Opera 11.50, Internet Explorer 9, Safari 5) renders the text the same as real text, regardless of x-coordinate shift.
所以，我现在想知道的主要是，是否存在一个（正常，快速）的方式来使浏览器绘制文本到< canvas>
So the main thing I'm now wondering is whether or not there exists a (normal, fast) way to make a browser draw text to a <canvas> with the same crispness as it draws text to the page when it's just placing text.
我已经阅读了 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-和 http://www.bel.fi/~alankila/lcd/ - 这些都没有涵盖这个主题。最后一个提供了一个有趣的方法，但只有当画布是空的，这是只能使用，这太局限于现实世界的使用，整洁（因为它是太昂贵的构建一个新的画布每一行文本，调用fillTExt然后使用扫描线清理它，然后复制文本与alpha混合）。
I've read 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, and http://www.bel.fi/~alankila/lcd/ - none of these cover the subject. The last offers an interesting approach, but one that can only be used if the canvas is empty, which is too limited to be of real-world use, neat as it is (it's too expensive to construct a new canvas for every line of text, call fillTExt and then clean it up using scanlines, and then copy the text over with alpha blending).
那么，可以这样做吗？如果你知道如何，我真的，真的很想知道如何实现这一点。如果你认为答案是否定的：请包括官方规范的链接，证明为什么这个答案是正确的答案...我需要一个官方规范的安心，说我不能做我想要的，或我我们只是想知道一些更聪明的人是否可能用yes= P
So.... can this be done? If you know how, I'd really, really like to know how to achieve this. And if you think the answer is no: please, include links to official specs that demonstrate why that answer is the right answer... I need the peace of mind of an official spec saying I can't do what I want, or I'll just keep wondering whether some even smarter person might have answered this question with "yes" =P
推荐答案
回答了这个问题因此，我现在想知道的主要是，是否存在一种（正常，快速）的方式来使浏览器绘制文本到一个具有相同的脆度，因为它绘制文本到页面，当它只是放置文本。
So the main thing I'm now wondering is whether or not there exists a (normal, fast) way to make a browser draw text to a with the same crispness as it draws text to the page when it's just placing text.
简单的答案很遗憾没有。不同的浏览器目前正以不同的方式实现子像素渲染/反锯齿，这导致（对于某些浏览器）渲染的HTML页面文本看起来不错，但它们的Canvas文本看起来很糟糕。
The short answer is sadly no. Different browsers are currently implementing subpixel rendering/anti-aliasing for text in wildly different ways, which leads to (for some browsers) their rendered HTML page text looking good but their Canvas text looking awful.
一种可能性是预先渲染你的所有文本（即使这意味着它写在一个HTML页面和截图），并使用 drawImage 。这也有利于比调用 drawText 快得多，但是当然不是很动态。
One possibility is to pre-render all of your text (Even if that means writing it on an HTML page and taking a screenshot) and using drawImage. This also has the benefit of being much faster than calls to drawText, but of course is not very dynamic at all.
这篇关于可以使画布context.fillText清脆（因为context.translate 0.5 / 0.5不）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
