184 • Глава 5
ПРИМЕЧАНИЕ Обратите внимание, что методы save и restore не влияют на пути и растровые рисунки, уже
находящиеся на холсте (невозможно восстановить предыдущее состояние рисунка на холсте)
ВИЗУАЛИЗАЦИЯ ТЕКСТА На холсте можно вывести какой-нибудь текст, причем указав для него шрифт, размер, вы-
равнивание и положение нижней линии. Также можно залить буквы (то есть сделать их
похожими на обычные буквы в книге) или только обвести их очертания. Некогда существо-
вавший проект Bespin представлял собой отличный пример применения пользовательской
визуализации текста для создания полнофункционального редактора кода исключительно
с использованием возможностей API холста (на смену ему пришел Ace от ребят из Ajax.org,
но их версия не использует холст).
Для того чтобы нарисовать текст, вам нужна сама строка и координаты. Например, я ис-
пользовал рисованный текст для того, чтобы продемонстрировать, как работает метод
translate
(рис. 5.19, а также рис. 5.13 ранее в этой главе). С помощью
fillText
я подписы-
вал место, куда переносится новая центральная точка холста, а также координаты точек
(размер холста в данном примере равен 300×300 пикселов):
function dot(string) {
ctx.beginPath();
ctx.arc(0,0,5,0,Math.PI*2,true); // рисую
¬ круг
ctx.fill();
ctx.fillText(string, 5, 10); // вывожу текст
}
Теперь можно транслировать холст и вызывать функцию
dot
, передавая ей строку с текстом
подписей для точек:
dot('1. no translate'); // рисую точку
ctx.translate(150, 150);
dot('2. (150, 150)'); // рисую точку
ctx.translate(-100, 20);
dot('3. (-100, 20)'); // рисую точку
