Можностей, предоставляемых веб-разработчикам



Pdf көрінісі
бет208/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   204   205   206   207   208   209   210   211   ...   232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

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)'); // рисую точку


Достарыңызбен бөлісу:
1   ...   204   205   206   207   208   209   210   211   ...   232




©emirsaba.org 2024
әкімшілігінің қараңыз

    Басты бет