HTML5 - Рисуване върху платно

Ключът към наличието на здрави структури са основите, за това трябва да имаме здрави и добре дефинирани основи, следователно, за да можем да използваме елемента до неговия максимален капацитет Платно Първо трябва да знаем задълбочено основните аспекти и затова ще започнем да рисуваме основни форми, с това ще научим как работят различните методи за рисуване и след това можем да правим по -сложни композиции.
Начертайте правоъгълник
Правоъгълникът е много проста фигура, която се състои от 4 страни, нека видим методите, които имаме на разположение, за да можем да го нарисуваме върху платното:

• clearRect (x, y, w, h): Почиства правоъгълник или част от предварително определен правоъгълник.
• fillRect (x, y, w, h): Използва се за рисуване на запълнен правоъгълник.
• strokeRect (x, y, w, h): Използва се за рисуване на правоъгълник без запълване.

Както ще забележим, всички предишни методи използват 4 аргумента, тези аргументи съответстват на следното:

• x и са границите на горния ляв ръб на правоъгълника.
• w h съответстват на ширината и височината съответно.

Нека видим един прост пример, за да можем да приложим тези елементи на практика:

 Пример Вашият браузър не поддържа елемента платно 

В този пример виждаме, че дефинираме някои променливи, където казваме изместване или ограничаване на мястото, където ще започнат правоъгълниците, размера и след това броене на вар, което ще служи като брояч за извършване на повторенията, така че виждаме в следващия раздел, че знаем, че ще правим правоъгълници динамично, нека видим как са нарисувани в нашия браузър:

Направихме два реда по 5 правоъгълника всеки, ако погледнем кода, който сме нарекли методите fillRect () първо за запълнени правоъгълници и след това до strokeRect за ненапълнените.
Използване на метода clearRect ()
Ами ако сега искаме да почистим част от запълнените правоъгълници? За това имаме метода clearRect (), в следния код ще видим как работи:

 Пример Вашият браузър не поддържа елемента платно 

За всяко повторение прилагаме извикване към метода clearRect () и когато правим алгоритъма, го направихме да премине през целия център на запълнените правоъгълници, нека видим на следващото изображение как изглежда в нашия браузър:

Тук можем да видим как сме почистили област, която преди това сме начертали.
С това завършваме този урок, където успяхме да видим малко по -задълбочено някои методи, които можем да използваме, за да нарисуваме в нашия елемент Платно.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка