Съдържание
Когато използвате артикула платно за рисуване не се ограничаваме само до рисуване на правоъгълни фигури, можем да рисуваме и с помощта на координати и т.нар пътеки които са пътища, по които ще посочим елемента платно къде и как да покажем нашата рисунка.Възможностите, които това ни дава, са впечатляващи, защото с необходимите алгоритми можем да правим неограничени композиции, да рисуваме всякакъв вид фигура в HTML5 и с него до постигане във връзка с други елементи резултати, които никога не са се представяли в предишните спецификации на езика.
Използване на Path
Както споменахме, път е това, което ще ни позволи да посочим на платното координатите, по които трябва да се направи чертежа, с тези координати платното ще може да знае къде да нарисуваме съответните линии и в крайна сметка с правилното натрупване на линии можем да постигнем всякакви тип фигура.
Преди да преминем към съответните примери, трябва да знаем какви методи са налични за елемента canvas и пътя, нека видим следния списък:
- beginPath (): Този метод ни позволява да започнем нов път.
- closePath (): Този метод се опитва да затвори текущия път, като чертае линия от края на последния ред до началните координати.
- fill (): Попълнете формулярите, описани от подпътеките.
- isPointInPath (x, y): Връща true, ако посочената точка се съдържа във формата, нарисувана от текущия път.
- lineTo (x, y): Начертайте под-път по посочените координати.
- moveTo (x, y): Тя ни позволява да преминем към посочените координати, без да се налага да чертаем под-път.
- правоъгълник (x, y, w, h): Начертайте правоъгълник, чиито координати в горния ляв ъгъл съответстват на (x, y) ширината му съответства на w, а височината на h.
- удар (): Начертайте външните линии на фигурите, нарисувани от подпътеката.
• Ние наричаме метода beginPath.
• Придвижваме се до началната позиция, използвайки метода moveTo.
• Начертаваме подпътеките с методите lineToи т.н.
• По избор можем да извикаме метода closePath.
• Накрая наричаме методите напълни или стоук.
Вече имаме препоръчаната поръчка да започнем да рисуваме, сега виждаме съответния код в HTML5.
Пример Вашият браузър не поддържа елемента платно Както виждаме, се осъществяват две повиквания до beginPath(), с това можем да започнем зоните за рисуване върху платното, след което с moveTo () установяваме началните позиции, а останалото е да рисуваме.
Нека да видим как изглежда нашата рисунка в браузъра:
