Элемент canvas, к сожалению, плохо обрабатывает текст. Существует множество подходов (см., Например, http://canvaspaint.org/blog/2006/12/rendering-text/), но они в основном выглядят как хаки. Что я могу сделать, это кросс-платформенный и дает мне максимальную гибкость, чтобы мои шрифты были такими, как я хочу?Каков наилучший способ нарисовать текст на элементе холста HTML?
Вы посмотрели шрифт .js, http://typeface.neocracy.org. Я слышал, что он довольно прост для написания текста. Вот со своего сайта:
«typeface.js использует возможности векторного рисования для браузера для рисования текста в HTML-документах. В то время как браузеры поддерживали векторный рисунок - Firefox, Safari и Opera поддерживают элемент <canvas> (а также SVG), а IE поддерживает VML.
Проект typeface.js имеет два компонента: модуль perl для преобразования шрифтов и библиотеку javascript для рисования в браузере. Модуль perl извлекает информацию о символе глифа из truetype и записывает данные в формате JSON. Затем библиотека javascript обходит документ HTML и визуализирует текст с помощью <canvas> или VML для рисования глифов.
В браузерах, поддерживающих <canvas>, текст можно выбрать, но вы должны иметь веру. Когда вы выбираете, нет обратной связи, нет подсветки, чтобы вы знали, что она работает. Дальнейшая работа будет направлена на реализацию лучшего, поддержку кросс-браузер для выбора текста с подсветкой «(цитата из http://typeface.neocracy.org/usage.html)
Если вы хотите использовать текстовые методы HTML5, вы должны попробовать эту библиотеку:. http://code.google.com/p/canvas-text/ Я . основной разработчик, так что я могу помочь, и внести изменения очень быстро
демонстрационные здесь: http://canvas-text.googlecode.com/svn/trunk/examples/index.html
Он все еще находится в стадии альфа, поэтому любой отчет об ошибке и отзывы приветствуются :)
это ссылка устарела, и спецификация, на которую указывает, была обновлена до учтите текстовую диаграмму api. Для аналогичного (и, надеюсь, полезного) вопроса см. Http://stackoverflow.com/questions/719848/how-do-you-draw-text-on-a-canvas-tag-in-safari –
fillText() только поддерживается в бета-версиях Safari и Firefox (не уверен в других браузерах), что не делает его очень полезным. Различные хаки, упомянутые в моей ссылке, в основном кросс-платформенные. – swampsjohn