Как лучше всего рисовать текст на элементе холста HTML?

Элемент canvas, к сожалению, плохо обрабатывает текст. Существует множество подходов (см., например, http://canvaspaint.org/blog/2006/12/rendering-text/ ), но в основном они выглядят как хаки. Что я могу сделать, что является кроссплатформенным и дает мне максимальную гибкость, чтобы сделать мои шрифты такими, как я хочу?


javascript canvas text html
person swampsjohn    schedule 27.04.2009    source источник
comment
Эта ссылка устарела, и спецификация, на которую она указывает, была обновлена ​​для учета API для рисования текста. Аналогичный (и, надеюсь, полезный) вопрос см. в разделе stackoverflow.com/questions/719848/   -  person Crescent Fresh    schedule 28.04.2009
comment
fillText() поддерживается только в бета-версиях Safari и Firefox (не уверен в других браузерах), что не делает его очень полезным. Различные хаки, упомянутые в моей ссылке, в основном кроссплатформенные.   -  person swampsjohn    schedule 28.04.2009

Ответы (2)


arrow_upward
2
arrow_downward

Вы смотрели typeface.js, http://typeface.neocracy.org. Я слышал, что это довольно твердо для написания текста. Вот с их сайта:

«typeface.js использует возможности векторного рисования браузеров для рисования текста в HTML-документах. Долгое время браузеры поддерживали векторное рисование — Firefox, Safari и Opera поддерживают элемент <canvas> (а также SVG), а IE поддерживает ВМЛ.

Проект typeface.js состоит из двух компонентов: модуля perl для конвертации шрифтов и библиотеки javascript для рисования в браузере. Модуль Perl извлекает информацию о контуре глифа из шрифтов TrueType и записывает эти данные в формате JSON. Затем библиотека javascript проходит по HTML-документу и отображает текст с помощью <canvas> или VML для рисования глифов.

В браузерах, поддерживающих <canvas>, текст можно выделить, но вы должны верить. Когда вы выбираете, нет обратной связи, нет выделения, чтобы вы знали, что это работает. Будущая работа будет направлена ​​на реализацию улучшенной кросс-браузерной поддержки выделения текста с выделением». //typeface.neocracy.org/usage.html)

person nickytonline    schedule 28.04.2009

arrow_upward
2
arrow_downward

Если вы хотите использовать текстовые методы HTML5, попробуйте эту библиотеку: http://code.google.com/p/canvas-text/ Я главный разработчик, поэтому могу помочь и очень быстро внести изменения.

Демонстрации находятся здесь: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

Он все еще находится в стадии альфа-тестирования, поэтому приветствуются любые сообщения об ошибках и отзывы! :)

person Fabien Ménager    schedule 28.04.2009