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

жүктеу/скачать 5,47 Mb.

Pdf көрінісі

бет	194/232
Дата	06.01.2022
өлшемі	5,47 Mb.
	#12231

1 ... 190 191 192 193 194 195 196 197 ... 232

Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)

Рис . 5 .10 . Человечек, нарисованный Рис . 5 .11 .

Рис . 5 .10 .
Человечек, нарисованный
Рис . 5 .11 .
Пример ошибки на рисунке,
с помощью API путей
вызванной соединением разных путей
ctx.beginPath();
// рисую улыбку
ctx.strokeStyle = '#c00';
ctx.lineWidth = 3;
ctx.arc(100, 50, 20, 0, Math.PI, false);
ctx.stroke();
Предыдущий код рисует симпатичную полуокружность новым цветом и новой ширины.
Для головы я использовал метод
fill
, но для лица мне нужен метод
stroke
, иначе вместо
линии получится залитая фигура. Теперь перейдем к глазам:
ctx.beginPath();
ctx.fillStyle = '#c00';
// начало левого глаза
ctx.arc(90, 45, 3, 0, Math.PI*2, true);
ctx.fill();
ctx.moveTo(113, 45);
// рисую правый глаз
ctx.arc(110, 45, 3, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke(); // более толстые линии для глаз

Холст • 171
Я снова начал новый путь, то есть перешел к дуге левого глаза, не используя
moveTo
(так же,
как перешел от головы к улыбке). Однако после того как я нарисовал и залил первую дугу
(получив в итоге круг), я поднял карандаш методом
moveTo(113,

45)
и перешел к рисова-
нию правого глаза. Обратите внимание, что в методе
moveTo
координата
x
равна 113 — это
координата
x
второй дуги плюс ее радиус. Таким образом, начальная точка второй дуги
оказалась в точности там, куда я перенес карандаш. В конце с помощью метода
stroke

я делаю контуры глаз немного толще.
Дальше в коде я переношу начальную точку в разные места на холсте, рисую линии и в ито-
ге получаю этого прекрасного человечка-огуречка.
Есть и другие методы рисования путей, которые в этой главе мы рассматривать не будем.
Однако вы можете использовать
quadraticCurveTo
,
bezierCurveTo
,
arcTo
,
rect
,
clip

и
isPointInPath
для более точного рисования линий и фигур.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу:

1 ... 190 191 192 193 194 195 196 197 ... 232