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



Pdf көрінісі
бет193/232
Дата06.01.2022
өлшемі5,47 Mb.
#12231
1   ...   189   190   191   192   193   194   195   196   ...   232
Рис . 5 .9 .
 Если растянуть холст после того, как рисование закончилось,  
то содержимое холста тоже будет растянуто
РИСОВАНИЕ ПУТЕЙ
Внутри API 2D есть API 
path
 — API путей, позволяющий перемещаться по холсту и рисо-
вать линии и фигуры. На рис. 5.10 показан человечек, нарисованный с помощью API путей.
Я не собираюсь во всех подробностях рассказывать вам о коде для рисования этого шедев-
ра, остановлюсь только на ключевых моментах и поговорю о методах. Для того чтобы нари-
совать человечка типа «палка-палка-огуречик», нужно указать координаты 
x
 и 
y
 на холсте 
для каждой составляющей его фигуры и палочки. Например, следующий код рисует голову:
ctx.beginPath();
ctx.arc(100, 50, 30, 0, Math.PI*2, true); // голова
ctx.fill();
Под головой я имею в виду круг со сплошной заливкой. Я задал координаты 
x
 и 
y
, равные 
100 и 50 соответственно, и радиус 30 пикселов. Следующие два аргумента — это начальная 


170  •  Глава 5
и конечная точки дуги в радианах. В данном примере мне нужен полный круг, поэтому 
я начинаю рисовать его с нуля и заканчиваю на значении 
Math.PI*2
, что соответствует 
360 градусам. Наконец, последний аргумент — это направление рисования дуги: по часовой 
стрелке или против часовой стрелки. В данном случае это неважно, но аргумент обязатель-
ный, поэтому какое-то значение все равно должно присутствовать.
Итак, голова нарисована, и настал черед лица. Улыбка и глаза будут красными. Перед тем 
как переходить к лицу, нужно снова использовать метод 
beginPath
. На рис. 5.11 показано, 
что получится, если забыть о нем. Предыдущая дуга сольется с новым путем, с помощью 
которого я рисую лицо. Это неправильно — для рта мне нужна новая отдельная дуга. 
Убрать отрезок, соединяющий очертания головы со ртом, можно при помощи 
moveTo
 — это 
как поднять карандаш над холстом и начать рисовать в другом месте, — однако при этом 
вокруг головы все равно появится цветной контур, который мне не нужен.
 


Достарыңызбен бөлісу:
1   ...   189   190   191   192   193   194   195   196   ...   232




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

    Басты бет