Преглед садржаја
Елемент Платно То је једна од најочекиванијих новина које има ХТМЛ5 Будући да је то озбиљна алтернатива Адобе Фласх додатку, захваљујући својим изворним могућностима и не зависећи од библиотеке независних произвођача, добијамо стабилност и подршку за прегледач директно, у случају проблема са имплементацијом ХТМЛ5 стандарда .Елемент Платно омогућава нам да ограничимо подручје у нашим документима ХТМЛ5 где можемо да цртамо, па чак и додајемо ефекте и кретања кроз Јавасцрипт.
Елемент Цанвас
Пре него што почнете да радите са ставком Платно, дефинисаћемо његове основне карактеристике, имамо да је то елемент протока, потпуно је нов у ХТМЛ5, његови атрибути су висина за висину и ширина за ширину.
Погледајмо испод мали пример како можемо дефинисати платно у нашем документу:
Пример Ваш прегледач не подржава елемент платно Хајде да брзо видимо шта се дешава у примеру; прво дефинишемо стил где додељујемо мало дебелу ивицу како бисмо могли да разликујемо наш Платно празан, тада покрећемо елемент Цанвас са његовом почетном ознаком и дефинишемо његове атрибуте висине и ширине, унутар ознака постављамо поруку у случају да се документ отвори помоћу прегледача који не подржава ову спецификацију стандарда.
Хајде сада да видимо како овај код који смо управо објаснили изгледа у нашем прегледачу:
Наш први цртеж
Као што смо споменули на почетку водича, да бисмо цртали и извршавали радње у оквиру Цанвас -а морамо користити Јавасцрипт, за то ћемо користити метод тзв. гетЦонтект () то нас ставља у контекст платна и помоћу њега можемо рећи шта да покажемо.
Можемо цртати фигуре и у 2Д и у 3Д, за то пролазимо у случају првог, аргумента "2д".
Погледајмо следећи пример да бисмо боље дефинисали оно што објашњавамо:
Пример Ваш прегледач не подржава елемент платно Овде смо једноставно дефинисали променљиву цтк којој ћемо доделити објекат документ а последњи ће позвати методу гетЦонтект и примените га на елементу Цанвас; онда имамо да променљива цтк позива метод који се зове филлРецт и овоме преносимо неке координате, ако помно погледамо пролазимо кроз 4 стране, да видимо да је ово нацртало у прегледачу:
