Подпиксельный сглаженный текст в элементе canvasа HTML5

Я немного смущен тем, как текст элемента canvas с элементами сглаживания, и я надеюсь, что вы все сможете помочь.

На следующем скриншоте верхний «Quick Brown Fox» является элементом H1, а нижний – элементом canvasа с текстом, отображаемым на нем. Внизу вы можете видеть, что оба «F» расположены бок о бок и увеличены. Обратите внимание, как элемент H1 лучше сочетается с фоном:

Вот код, который я использую для рендеринга текста canvasа:

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); } 

Можно ли сделать текст на canvasе таким образом, чтобы он выглядел идентичным элементу H1? И почему они разные?

Теперь можно получить субпиксельный рендеринг шрифтов, создав непрозрачный контекст canvas. В Safari и Chrome вы можете получить это с помощью этого fragmentа:

var ctx = canvas.getContext("2d", {alpha: false})

Я нашел это из этого сообщения в блоге .

Отвечая на мой вопрос:

Это возможно с использованием техники, продемонстрированной на этом сайте:

https://bel.fi/alankila/lcd/

Единственная проблема заключается в том, что ее слишком медленно реализовать в производственном приложении. Если кто-то бежит быстрее, пожалуйста, дайте мне знать.

Мэтт, я сидел с (той же / подобной) проблемой на прошлой неделе, что, в моем случае, оказалось из-за различий в плотности пикселей на устройствах, которые я тестировал; Я написал об этом сегодня вечером – http://joubert.posterous.com/crisp-html-5-canvas-text-on-mobile-phones-and

Ссылка на постом мертва, поэтому вот суть с исходным кодом: https://gist.github.com/joubertnel/870190

И сам fragment:

  // 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); 

Вот способ выполнения субпиксельной рендеринга для любого содержимого canvasа (текст, изображения, векторы и т. Д.). http://johnvalentine.co.uk/archive.php?art=tft .

Схема метода

Он рисует на canvas, который затем тянется к экрану, чтобы использовать Rp-полосатые субпиксели. Он также работает с альфа-каналами. Обратите внимание, что это может не сработать, если вы используете портретный дисплей, не полосатые пиксели или если ваш браузер отображает canvasы с меньшим разрешением, чем ваш дисплей.

Там есть возможность для тонкой настройки, но это большой выигрыш для простого метода.

Это обычно называется подпиксельным сглаживанием или ClearType в Windows. Я не знаю никаких комбинаций ОС / браузеров, которые в настоящее время поддерживают это для Canvas.

Мне было бы интересно увидеть некоторые тесты с использованием субпиксельных смещений для текста, чтобы увидеть, используют ли какие-либо браузеры даже пиксельные подсказки для рендеринга шрифтов (например, выравнивание восходящих линий на границах пикселей). Мое предположение не было бы.

Изменить : мое предположение было неправильным; похоже, что Safari, Chrome и Firefox используют некоторые пиксельные шрифты. Safari и Chrome появляются одинаково, привязавшись к границам всего пикселя, но отличаются от Firefox (привязка к границам с половиной пикселей?). Смотрите визуальные результаты тестирования (на OS X) здесь: http://phrogz.net/tmp/canvas_text_subpixel.html

  • Можно ли изменить цвет текста в строке на несколько цветов в Java?
  • Форматирование текста в ярлыке WinForm
  • Усечение длинных строк с помощью CSS: возможно?
  • Как эффективно анализировать CSV-файл в Perl?
  • Хороший цвет текста переднего плана для заданного цвета фона
  • Сортировка текстового файла по длине строки, включая пробелы
  • Чтобы нарисовать подчеркивание под TextView в Android
  • Можно ли написать вертикально в текстовом виде в android?
  • Вертикальная (повернутая) метка в Android
  • Тайм-аут в async / wait
  • Эффективность анализа (если, TryParse, Try-Catch)
  • Давайте будем гением компьютера.