Можностей, предоставляемых веб-разработчикам
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
- Бұл бет үшін навигация:
- ВИЗУАЛИЗАЦИЯ ТЕКСТА
| 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)'); // рисую точку жүктеу/скачать 5,47 Mb. Достарыңызбен бөлісу:
|