Субпиксельный сглаженный текст на элементе HTML5 canvas - PullRequest
Новая
       57

Субпиксельный сглаженный текст на элементе HTML5 canvas

44 голосов
/ 29 декабря 2010

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

На следующем скриншоте верхняя «Быстрая коричневая лиса» - это элемент H1, а нижняя - это элемент canvas с отображенным на нем текстом. Внизу вы можете видеть оба «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? И чем они отличаются?

Ответы [ 5 ]

20 голосов
/ 27 января 2015

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

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

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

14 голосов
/ 29 декабря 2010

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

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

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

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

6 голосов
/ 15 марта 2011

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

Ссылка на posterous неактивна, поэтому вот суть исходного кода: 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);
2 голосов
/ 18 июля 2013

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

Краткое описание метода

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

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

1 голос
/ 29 декабря 2010

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

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

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

...