Съдържание
С различните методи за рисуване, видяни в платно Възможно е да се дефинират области в тях за рисуване, въпреки че това е малко по -сложно, че е напълно възможно, но също така имаме възможност да постигнем същия резултат, използвайки метода clip ().Друг аспект, който също може да бъде включен в платно е текстовата рисунка, може би си мислим, че с помощта на CSS и други елементи можем да нарисуваме текст, който е един и същ или по -добре изглеждащ, въпреки че е в платно ни позволява да прилагаме местни анимации в HTML5.
Метод на клип
Както споменахме в началото, този метод опростява пътя към как можем да създадем раздел в платно, за да можете да въведете други начертани елементи, като например нов чертеж или да го попълните с определен цвят.
За да използваме този инструмент, трябва да извикаме метода clip (), това, което прави този метод, е да създаде регион от изрязване или нов раздел, нека видим в следния код как работи:
Пример Вашият браузър не поддържа елемента платно В този код първо нарисуваме голям правоъгълник в жълто, след което създаваме нов регион в него, използвайки метод clip () и в този регион генерираме нов червен правоъгълник.
Нека да видим как изглежда това в нашия браузър:
Можем също да рисуваме текст в платно, за това имаме следните методи:
fillText (, x, y, width): Изчертава и запълва текста, посочен в първия параметър на позиция (x, y). Освен това неговият аргумент ширина той не е задължителен, но когато е деклариран, той задава ограничение за ширината на текста.
strokeText (, x, y, width): Изчертава и оставя текста, без да се добавя на позиция (x, y). Подобно на предишния метод в своя незадължителен аргумент, той ограничава ширината на текста.
Нека да видим следния пример за това как да използваме тези методи за рисуване на текст върху нашето платно:
Пример Вашият браузър не поддържа елемента платно В този код използваме и двата метода, за да нарисуваме един и същ текст, и двата в една и съща позиция, но с различен цвят, с който постигаме ефект на външна рамка от един цвят и запълване на друг цвят, с това можем да установим повече забележима разлика между fillText Y strokeText.
Накрая и за да завършим този урок, нека видим как изглежда в браузъра.
