Можностей, предоставляемых веб-разработчикам
жүктеу/скачать 5,47 Mb. Pdf көрінісі
|
- Бұл бет үшін навигация:
- Рис . 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. Достарыңызбен бөлісу:
|