Съдържание
Елементът Платно Това е една от най -очакваните новости, които има HTML5 Тъй като е сериозна алтернатива на приставката на Adobe Flash, благодарение на нейните собствени възможности и като не зависи от библиотека на трета страна, ние печелим стабилност и поддръжка на браузъра директно, в случай на проблем с внедряването на стандарта HTML5 .Елементът Платно ни позволява да разграничим област в нашите документи HTML5 където можем да рисуваме и дори да добавяме ефекти и движения чрез Javascript.
Елементът Canvas
Преди да започнете работа с елемента Платно, ще дефинираме основните му характеристики, имаме, че е елемент на потока, той е напълно нов в HTML5, неговите атрибути са височина за височината му и ширина за ширината му.
Нека видим по -долу малък пример за това как можем да дефинираме Canvas в нашия документ:
Пример Вашият браузър не поддържа елемента платно Нека бързо да видим какво се случва в примера; първо дефинираме стил, при който присвояваме леко дебела граница, за да можем да различаваме нашата Платно празен, след това стартираме елемента Canvas с неговия начален етикет и определяме неговите атрибути за височина и ширина, вътре в етикетите поставяме съобщение в случай, че документът е отворен с браузър, който не поддържа тази спецификация на стандарта.
Нека да видим сега как изглежда този код, който току -що обяснихме в нашия браузър:
Първата ни рисунка
Както споменахме в началото на урока, за да рисуваме и извършваме действия в Canvas, трябва да използваме Javascript, за това ще използваме метод, наречен getContext () това ни поставя в контекста на Canvas и с него можем да му кажем какво да покажем.
Можем да рисуваме фигури както в 2D, така и в 3D, за това преминаваме в случая на първия, аргумента "2d".
Нека разгледаме следния пример, за да дефинираме по -добре какво обясняваме:
Пример Вашият браузър не поддържа елемента платно Тук просто направихме дефиниране на променлива ctx на които ще присвоим обекта документ и последният ще извика метода getContext и го приложите върху елемента Canvas; тогава имаме, че променливата ctx извиква метод, наречен fillRect и към това предаваме някои координати, ако се вгледаме внимателно го предаваме на 4 страни, нека видим, че е нарисувал това в браузъра:
