2009-01-21

Буквы на холсте

Иногда на канвасе нужен текст. Хотя бы оси на графике подписать. Стандарт ещё никто не поддерживает. В Firefox есть что-то своё, что больше нигде не работает. Я попробовал наложить сверху div c абсолютными координатами, геморойно и плохо. Как покрутишь zoom, так всё разъезжается. Хотелось бы, чтобы прямо внутри канваса работало. Можно сделать bitmap с буквами и его копировать кусочками, но надо делать bitmap прозрачный, с антиалиасингом и alpha-channel. Проще всего сделать векторный фонт, воспользовавшись старыми программами для перьевых графопостроителей. Я уже сел было делать, как нашёл готовый. Вот, здесь пример, что у меня получилось.
Оказалось, что в бете IE8 нет канваса. Позор. IE8 идёт в баню.

6 comments:

Denis said...

Объясните, плиз, непрограммисту, что такое, а главное, для чего этот самый канавас нужен?

Valery Tolkov said...

http://en.wikipedia.org/wiki/Canvas_(HTML_element)

Т.е. это таг в HTML5, который создаёт прямоугольную область, внутри которой можно рисовать используя 2-мерные (пока) графические примитивы, типа линий, заполненных областей, готовых картинок и т.д.

Masterov said...

Вот этот календарь:
http://masterov.qptova.ru/demo/Calendar/
Оформлен с использованием векторной графики (текст заголовка, это - не битмап,а - текст). (Отображается только в IE5.5+)

Valery Tolkov said...

О! Привет!
VML не позволяет писать приложения и доступен только на IE. Если, к примеру, я бы делал сайт, вряд ли бы я использовал то, что доступно только на одном виде браузера. А статическая векторная графика доступна ещё и через SVG. Канвас позволяет строить графику непосредственно из скрипта на той же странице, не вовлекая в это сервер.

Мастеров said...

Валера, Привет! (Серёжа Кузнецов мне сказал, что тут твой комментарий имеется – не хватает этому движку блогов сервиса, который в почтовый ящик щлёт сообщения о появлении новых комментариев.)
Так воот… Я пытался разобраться с SVG и обнаружил, что SVG не поддерживает 3D (в отличие от VML). Что весьма прискорбно.
И вообще: браузеры медленно эволюционируют. Ещё 10 лет назад я научился в IE прописывать (связывать) обработчик событий с событием в теге (типа onclick:jsfunc;). Идея-то простая, очевидная и правильная. (Пусть бы браузер сам искал обработчик для события, коли он умеет это делать.) Но, увы. В браузерах этого нет до сих пор. Программистам вручную приходится привязывать событие с функцией, обрабатывающей это событие.

Valery Tolkov said...

Не знаю других программ, которые эволюционировали бы быстрее браузеров. Чего там только нет сейчас!

Что касается 3D, советую посмотреть на WebGl.