Рисуване форми, използващи платно - Web API интерфейси, MDN
Сега, след като установи, заобикалящата ни среда платно. ние се потопите в подробности за това как да се боя в платно. До края на тази статия, вие ще научите как да се направи правоъгълници, триъгълници, линии, дъги и криви, при условие, че сте запознати с основни геометрични форми. Работа с песни е изключително важно при изготвянето на обекти върху платното, и ще видим как може да се направи.
Рисуване правоъгълници
Първо, помислете правоъгълника. По-долу са трите функции на изготвянето правоъгълници в платното:
fillRect (X, Y, ширина, височина) запълнен правоъгълник рисунка. strokeRect (X, Y, ширина, височина) на правоъгълен контур чертеж. clearRect (х, у, широчина, височина) Пречистване на правоъгълна зона, като съдържанието напълно прозрачен.
Всяка една от тези функции отнема няколко параметъра:
- х. у установи позицията на горния ляв ъгъл на правоъгълника в платното (по отношение на произхода);
- ширина (W) и височина (височина) определяне на размерите на правоъгълника.
По-долу е функцията за теглене (), която използва тези три функции.
Пример създаде правоъгълни форми
Този пример е показан по-долу.
fillRect () функция обръща голямо черен квадрат със страна 100 пиксела. clearRect () функция намалява центъра на квадрата на 60x60 и функция strokeRect () създава правоъгълни контурни пиксела в 50x50 квадратен пречиства.
На следващата страница, ние смятаме, две алтернативен метод clearRect (), а също и вижте как можете да промените цвета и стила на показаните контурни форми.
За разлика от функцията на създаване на контури, които ще бъдат обсъдени в следващия раздел, и трите опции за създаване на правоъгълник, веднага показва на платното.
Рисуване схеми (път)
Останалата част от примитивни форми са създадени схеми. Contour - набор от точки, които се свързват към сегменти линия могат да образуват различни форми, извити или не, различни ширини и различни цветове. Circuit (или subpath) може да се затвори.
Създаване на форми, използващи контури се случва в редица важни стъпки:
- Първо трябва да създаде веригата.
- След това, с помощта на изчертаване на командите. изготвяне на веригата.
- След това затворете примката.
- Създаване на пътя, можете да попълните на кръга или да го покажете.
Това са функции, които могат да бъдат използвани в описаните стъпки:
beginPath () Създава нова верига. След създаването на допълнително при построяването инструкции за рисуване осморки. Методи пътя Методите за определянето на различни очертания обект. closePath () Затваря верига. така че бъдещите прерисувайки команди, изпратени контекст. инсулт () Насочва форма на външната страна на удара. запълване () Чертае запълнен интериор форма.
Първата стъпка в създаването на контура е да се обадите функция beginPath (). Вътре съдържа контури като набор от под-схеми (линии, дъги и т.н.), които заедно образуват формата на фигурата. Всяка покана към този метод изчиства снимачната площадка, и можем да започнем изготвянето на нови форми.
Забележка: ако текущия път е празен (например, след като се обадите beginPath () или на новосъздадената платното), първата команда профил Конструкцията е винаги функционира moveTo (). Ето защо, ние винаги може да зададете началната позиция на контура рисунка след нулирането.
Втората стъпка е да се обадите на методите, определени с изглед към пътя, който искате да се направи. Те ще се счита за по-късно.
Третият и незадължителен етап - това е предизвикателство closePath (). Този метод се опитва да затворите фигурата при очертаване на права линия от текущата точка на старта. Ако цифрата вече е затворен или е просто една точка, а след това функцията не прави нищо.
Забележка: Когато се обадите запълване (). След това всеки отворен фигура се затваря автоматично, така че не можете да използвате closePath (). Това обстоятелство не се случва в случай на удар на повикване ().
триъгълник Draw
Например, за да се направи триъгълник код ще изглежда по следния начин:
Резултатът изглежда така:
Ще забележите разликата между пълни и кръжаха триъгълник пътеки. Това е, както е споменато по-горе. се дължи на факта, че цифрата е затворен автоматично. когато пътят е пълен (т.е.. д. боядисва). но не и когато той очерта (т.е.. д. верига кръг). Ако не се вземат под внимание closePath () за очертаната триъгълника. След това щеше да бъде изготвен само две линии, а не пълен триъгълник.
За тираж дъги и окръжности, използване методи дъга () и арктическа ().
дъга (х, у, радиус, startAngle, endAngle, обратно на часовниковата стрелка) Draw дъга с център в точката (х, у) с радиус R. тъй като ъгъл startAngle и завършва vendAngle в обратна на часовниковата стрелка посока обратно на часовниковата стрелка (по подразбиране, докато се движат по часовниковата стрелка). арктическа (х1, у1, Х2, Y2, радиус) Draw дъга с предварително определена референтна точка и радиус, свързването на тези точки, като права линия.
Нека да разгледаме по-подробно (метод дъга). която има пет параметри: х и у - координатите на кръг център, където дъгата е да се изготви. радиус - се нуждае от обяснение. Ъглите startAngle и endAngle определят началната и крайната точка на дъгата в радиани периферен крива. Брой се получава от х-ос. Параметър обратно на часовниковата стрелка - Булева стойност, която, ако е вярно. след изготвянето на дъгата се прави обратна на часовниковата стрелка; в противен случай картината е направено в посока на часовниковата стрелка.
Следващият пример е малко по-сложно, отколкото смятахме преди това. Има 12 различни дъги са изготвени с различни ъгли и запълва.
Две от по линия се поставя дъга в колони и редове. За всяка дъга, ние започваме нов път, което води до beginPath (). В този код, всеки от опцията дъга за яснота помещава в променлива, но не е нужно да го правят в реални проекти.
X и Y координати трябва да са достатъчно ясни. радиус и startAngle - фиксирана. endAngle започва с 180 градуса (полукръг) в първата колона и увеличаване на стъпки от 90 градуса, пълната обиколка завършва в последната колона.
Създаване на часовниковата стрелка определя резултатът в първия и третия линии рисуване дъги се извършва в посока на часовниковата стрелка, а на втория и четвъртия обратно на часовниковата стрелка. Поради ако условие горната половина на дъги образуват чрез контур (инсулт) и долната половина на дъги леене.
Забележка: Този пример изисква малко повече платно (платно), от другите на тази страница: 150 х 200 пиксела.
правоъгълници
Всички тези методи, които сме виждали в квадранти на тираж. които изготвят правоъгълници веднага в платно, има и начин на прякото (). което не е показано, и само добавя към линия за чертане (път), посочен правоъгълник до последната отворена верига.
прякото (х, у, широчина, височина)
Добавя път правоъгълник горния ляв ъгъл е определен чрез използване на (X, Y) с височина и ширина
При този метод се нарича автоматично наречен moveTo () метод с параметри (х, у). С други думи, позицията на курсора се задава в началото на добавената правоъгълника.
Създаване на комбинации
До сега, във всеки случай, ние използваме само един тип верига функции за всяка форма.
Въпреки това, няма ограничения за броя или вида на вериги, които могат да бъдат използвани за създаване на форми. Нека се обединим в този пример, всички тези схеми да функционира, за да се създаде набор от много известни герои игра.
Крайният образ изглежда така:
Ние няма да преминеш тоя в подробности, тъй като това всъщност е изненадващо прост. Най-важните неща, да се отбележи, са използването на имота fillStyle от контекста на рисуване, както и използването на функцията на полезност (в този случай roundedRect ()). Използването на комунални функции за бита от рисуваш ли често може да бъде много полезно, и да се намали размера на кода, който трябва, както и неговата сложност.
Ние ще проверим отново fillStyle. по-подробно, по-късно в този урок. Ето, всичко, което правим, е да го използвате, за да промените цвета на запълване за пътеки от стандартния цвят на черно до бяло, а след това обратно.
Path2D обекти
Както видяхме в последния пример, не може да има поредица от пътеки и рисунка команди, за да изготви обекти на вашия платно. За опростяване на кода и за подобряване на производителността, обектът Path2D, на разположение в последните версии на браузъри, ви позволява да кешира или запишете тези рисуване команди. Вие сте в състояние да възпроизвежда вашите пътища бързо.
Нека да видим как можем да изградим една Path2D обект:
Всички методи на пътя, като moveTo, на правоъгълник, дъга, quadraticCurveTo, и така нататък, което вече знаем, са на разположение за Path2D обекти
Този интерфейс Path2D добавя и начин да се съчетаят маршрути, използвайки метода на addPath. Това може да бъде полезно, когато искате да се изграждат обекти от няколко компонента, например.
Path2D.addPath (пътека [, трансформиране]) Добавя път към текущия път с допълнителен матрица трансформация.
Path2D пример
В този пример, ние създаваме правоъгълник и кръг. И двете се съхраняват като Path2D обект, така че те да са на разположение за по-късно използване. С новата Path2D API, няколко метода имам актуализирани, за да приеме евентуално Path2D обект да се използва на мястото на сегашния път. Тук, инсулт и запълване се използват с аргумент път да привлече и двата обекта върху платното, например.