Съдържание
По принцип всички фигури са направени от линии и криви, в много случаи можем да симулираме криви, използвайки много къси линии и в голям брой, но това е много сложно и включва изключителна работа, HTML5 и неговата практичност ни предлагат Метод на дъгата С които можем да развием извити линии и по някакъв начин да можем да допълним нашите рисунки.Метод на дъгата
Както споменахме в началото, този метод ни позволява да генерираме извити линии в рамките на елемента платно без по -голяма сложност, без да е необходимо да се въвеждат сложни математически формули, както може да се наложи да се направи в някои езици за програмиране.
Преди да видим как работи този метод, трябва да знаем неговите характеристики и свойства, ще ги видим по -долу в следния списък:
- дъга (x, y, rad, startangle, hazardgle, direction): Този метод изчертава крива в координатите (x, y) с радиус рад, началният ъгъл е начален ъгъл а краят на ъгъла е angleFinal. Имаме незадължителен параметър, който е адрес и посочва посоката, която ще поеме кривата, начертана по метода.
- arcTo (x1, y1, x2, y2, rad): Този метод ни позволява да начертаем крива към координатите (x2, y2), които преминават координатите (x1, y1) и имат радиус рад.
Както виждаме, имаме два основни метода, които ни позволяват всичко необходимо, за да можем да нарисуваме извитите линии в нашата платно елемент, сега нека да видим малко код, за да можем да демонстрираме как да приложим на практика това, което току -що видяхме:
Пример Вашият браузър не поддържа платно елемент Направихме извитата линия в примера, използвайки метода arcTo () което описахме по-рано, за да начертаем тази крива, ние зависим от две линии, първата се изтегля от края на последната под-пътека до точката, описана от първите два аргумента на метода, а втората линия се изтегля от точката, описана от първите два аргумента до точката, описана от третия и четвъртия аргумент.
Накрая кривата се изчертава като най-късата линия между последната под-пътека и втората точка, която описва крива на окръжност с радиус, определен от последния аргумент, така че да можем да видим какво имаме предвид, кодът включва някои редове на справка в червено. Нека видим по -долу изображение как изглежда това в нашия браузър:
