Я немного смущен тем, как текст элемента canvas сглаживает текст и надеюсь, что вы все сможете помочь.
На следующем скриншоте верхний "Quick Brown Fox" является элементом H1, а нижний - элементом холста с текстом, отображаемым на нем. Внизу вы можете видеть, что оба "F" расположены бок о бок и увеличены. Обратите внимание, что элемент H1 лучше сочетается с фоном:
Вот код, который я использую для рендеринга текста холста:
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);
}
Можно ли сделать текст на холсте таким образом, чтобы он выглядел идентично элементу H1? И почему они разные?
Отвечая на мой собственный вопрос:
Возможно использование метода, продемонстрированного на этом сайте:
Единственная проблема заключается в том, что ее слишком медленно реализовать в производственном приложении. Если кто-то бежит быстрее, пожалуйста, дайте мне знать.
Теперь можно получить субпиксельный рендеринг шрифтов, создав непрозрачный контекст холста. В Safari и Chrome вы можете получить это с помощью этого фрагмента:
var ctx = canvas.getContext("2d", {alpha: false})
Я нашел это из этого сообщения .
Мэтт, я сидел с (той же/подобной) проблемой на прошлой неделе, что, в моем случае, оказалось из-за различий в плотности пикселей на устройствах, которые я тестировал; Я написал об этом сегодня вечером - http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and
Ссылка на новость мертва, поэтому вот суть с исходным кодом: 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);
Вот способ выполнения субпиксельной рендеринга для любого содержимого холста (текст, изображения, векторы и т.д.). http://johnvalentine.co.uk/archive.php?art=tft.
Схема метода
Он натягивается на холст, который затем тянется к экрану, чтобы использовать субпиксели RGB-striped. Он также работает с альфа-каналами. Обратите внимание, что это может не сработать, если вы используете портретный дисплей, не полосатые пиксели или если ваш браузер отображает холсты с меньшим разрешением, чем ваш дисплей.
Имеется возможность тонкой настройки, но это большой выигрыш для простого метода.
Это обычно называется подпиксельное сглаживание или ClearType в Windows. Я не знаю никаких комбинаций ОС/браузеров, которые в настоящее время поддерживают это для Canvas.
Мне было бы интересно увидеть некоторые тесты с использованием субпиксельных смещений для текста, чтобы увидеть, могут ли какие-либо браузеры использовать пиксельные подсказки для рендеринга шрифтов (например, выравнивание восходящих линий на границах пикселей). Мое предположение не будет.
Изменить: мое предположение было неправильным; похоже, что Safari, Chrome и Firefox используют некоторые пиксельные шрифты. Safari и Chrome появляются одинаково, привязавшись к границам всего пикселя, но отличаются от Firefox (привязка к границам с половиной пикселей?). Смотрите визуальные результаты тестирования (на OS X) здесь: http://phrogz.net/tmp/canvas_text_subpixel.html