Я пытался найти в StackOverflow похожий вопрос, но мне кажется, что я могу найти только вопросы «как мне нарисовать текст в » (answer: 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, в обычном стиле и весе, и десять строк, отображаемых с одинаковыми свойствами шрифта с использованием элементов , причем каждая строка вызывает fillText со смещенной на 0,1 координатой x.Первая строка имеет координату х 0, вторая 0,1, третья 0,2 и т. Д.
Нет текущего браузера, поддерживающего , который я пробовал (Chrome 12, Firefox 5, Opera 11.50, Internet Explorer 9,Safari 5) отображает текст так же, как реальный текст, независимо от смещения координаты х.
Поэтому сейчас мне интересно, существует ли (нормальный, быстрый) способ созданияБраузер рисует текст в с той же четкостью, что и текст на странице, когда он просто размещает текст.
Я прочитал 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, а затем очистите его, используя линии сканирования, а затем скопируйте текст с альфа-смешиванием).
Итак ... это можно сделать?Если вы знаете, как, я бы очень хотел узнать, как этого добиться.И если вы думаете, что ответ «нет»: пожалуйста, включите ссылки на официальные спецификации, которые демонстрируют, почему этот ответ является правильным ответом ... Мне нужно спокойствие официальной спецификации, говорящей, что я не могу делать то, что хочу, или яЯ просто буду удивляться, мог ли кто-нибудь еще умнее ответить на этот вопрос: «да» = P