naxel Mar 19 2012 at 16:34

Выводим текст на HTML5 Canvas

5 min

98K

Website development *Canvas *

+50

Comments 21

wise_gopher Mar 19 2012 at 17:40

Спасибо! Через лет пять пригодится!

Vidog Mar 19 2012 at 19:36

Пользуетесь IE?

cbone Mar 19 2012 at 19:38

Посетители сайта пользуются IE

GIum Mar 19 2012 at 21:10

excanas не спасает?

kashey Mar 20 2012 at 07:50

может ExCannabis?
Так он же из VML сделан — заметут.

wise_gopher Mar 19 2012 at 20:57

Никак нет

mannaro Dec 28 2017 at 15:24

Ура, начали пользоваться! Как раз 5 лет прошло!

asci Mar 19 2012 at 17:55

Все хорошо, спасибо. Но если требуется динамическое обновление контента, то лучше не пользоваться текстом на канвасе — уж больно он прожорливый

stonedmind Mar 19 2012 at 18:16

Помоему в первую очередь минус в том, что поисковые боты не хавают этот текст. Хотя, я уверен, что применение есть этой библиотеке.

evgenyg Mar 19 2012 at 18:23

Есть такая проблема: при Zoom-In в браузерах текст отрендеренный в canvas теряет антиалиасинг и выглядит как увеличенный битмап. Интересно, можно ли с этим что-то сделать?

UFO just landed and posted this here

evgenyg Mar 19 2012 at 20:09

Так, получается, мы забьем на subpixel rendering. Но если я правильно понимаю, то размер canvas-а фиксируется и он не перерисовывается при zoom-е (пока мы сами не начнем слушать изменение zoom level-а, что не совсем тривиально). Т.е. проблема остается.

UFO just landed and posted this here

evgenyg Mar 19 2012 at 20:48

Не, я просто пытаюсь понять применимость. Подписывать фотки да, строить что-то сложнее — нет. И антиалиасинг, имхо, проблема номер 1. Просто с современными ноутами 15" и 1920 в ширину без зума никуда.

UFO just landed and posted this here

skorney Mar 19 2012 at 20:22

Я так понимаю что основной плюс в том, что текст виден в source code и есть надежда что будет индексироваться лучше чем текст на картинке или flash. Но он же не выделяется :)

kashey Mar 20 2012 at 07:52

Выделение без особых проблем эмулируется

GreatRash Mar 20 2012 at 11:45

Реально интересны только два последних примера. Остальное уже где только не обмусолено. Давайте больше интересностей ;)

OlgaS Mar 22 2012 at 11:58

Вот, пожалуйте, вам интересности. TeamLab Document Editor — первый 100% HTML5 редактор документов, в полной мере использует возможности Canvas. Скоро опубликуем подробный пост по технологии и разработке.

KvanTTT Jun 20 2013 at 22:56

Спасибо за код для многострочного текста, пригодился!

metalim Feb 5 2014 at 14:06

Картинки к выравниванию горизонтальному/вертикальному перепутаны местами. (Странно, что никто не написал)

Only those users with full accounts are able to leave comments. Log in, please.