Съдържание
Ключът към наличието на здрави структури са основите, за това трябва да имаме здрави и добре дефинирани основи, следователно, за да можем да използваме елемента до неговия максимален капацитет Платно Първо трябва да знаем задълбочено основните аспекти и затова ще започнем да рисуваме основни форми, с това ще научим как работят различните методи за рисуване и след това можем да правим по -сложни композиции.Начертайте правоъгълник
Правоъгълникът е много проста фигура, която се състои от 4 страни, нека видим методите, които имаме на разположение, за да можем да го нарисуваме върху платното:
- clearRect (x, y, w, h): Почиства правоъгълник или част от предварително определен правоъгълник.
- fillRect (x, y, w, h): Използва се за рисуване на запълнен правоъгълник.
- strokeRect (x, y, w, h): Използва се за рисуване на правоъгълник без запълване.
- x и са границите на горния ляв ръб на правоъгълника.
- w h съответстват на ширината и височината съответно.
Пример Вашият браузър не поддържа елемента платно
В този пример виждаме, че дефинираме някои променливи, където казваме изместване или ограничаване на мястото, където ще започнат правоъгълниците, размера и след това броене на вар, което ще служи като брояч за извършване на повторенията, така че виждаме в следващия раздел, че знаем, че ще правим правоъгълници динамично, нека видим как са нарисувани в нашия браузър:
Направихме два реда по 5 правоъгълника всеки, ако погледнем кода, който сме нарекли методите fillRect () първо за запълнени правоъгълници и след това до strokeRect за ненапълнените.
Използване на метода clearRect ()
Ами ако сега искаме да почистим част от запълнените правоъгълници? За това имаме метода clearRect (), в следния код ще видим как работи:
Пример Вашият браузър не поддържа елемента платно
За всяко повторение прилагаме извикване към метода clearRect () и когато правим алгоритъма, го направихме да премине през целия център на запълнените правоъгълници, нека видим на следващото изображение как изглежда в нашия браузър:
Тук можем да видим как сме почистили област, която преди това сме начертали.
С това завършваме този урок, където успяхме да видим малко по -задълбочено някои методи, които можем да използваме, за да нарисуваме в нашия елемент Платно.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка