ЗНАЙТЕ INTUIT, Лекция, HTML5

Има още един елемент, който трябва да се вземе предвид в контекста на изучаването на HTML5, а именно canvas > , или платно. Canvas се използва за поставяне на изображения на уеб страница, включително динамични.

Преди появата на платното, ако трябваше да поставите динамично изображение, трябваше или да създадетеphp- скрипт, илиflash- анимация. В някои случаи беше възможно да се използват Java Applet или ActiveX инструменти.

И трите метода изискват инсталирането на приставката, докатоActiveX– работи само вInternet Explorer. Ако вземем предвид възможността от страна на потребителя софтуерът да блокира изтеглянето наflash- видеоклипове и изображения, тогава поставянето на изображение на уеб страница, особено динамична, престава да изглежда като тривиална задача. Целта на уеб разработчика, наред с други, е също така да гарантира, че потребителят получава цялата необходима информация.

Нека да разгледаме какво платно > разработчик.

платно > е нов html5 елемент, който ви позволява да създавате изображения на вашия сайт с помощта на уеб скриптове.

Днес canvas се използва по-често за графики, прости анимации и игри в уеб браузъри.

елемент платно > подобно на img > , разликата е, че той няма src и alt атрибутите. Платно > има само 2 атрибута - ширина и височина. Ако тези атрибути не са налице, тогава ширината по подразбиране ще бъде 300px и височината 150px.

Основи на концепцията

Единственият поддържан в момента е контекстът на 2D изобразяване, контекстът на 3D изобразяване най-вероятно ще бъде добавен в бъдеще.

Поставен върху платно на HTML страница > по следния начин:

За да използвате програмно платно, първо трябва да получите неговияконтекст( контекст ). След това можете да извършите необходимите действия по отношение на контекста и след това накрая да приложите техния резултат към него. Тези. самото изобразяване се извършваследслед дефиниране на всички действия по отношение на платното.

Като се има предвид, че платно > не се поддържа от всички браузъри или техните версии, разработчиците се съветват да го използват само в онези задачи, при които платното не може да бъде заменено с други елементи.

Към момента на писане на лекцията, основна поддръжка за canvas > следните браузъри:

  • Internet Explorer9
  • Firefox(версии 9 - 12)
  • Chrome(версии 17 - 18)
  • Safari(версии 5.0 - 5.1)
  • Opera(11.6)
  • iOS Safari5.0
  • Opera Mobile12.0
  • Андро >

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

Разбира се, не само текстът може да се използва като спешно съдържание.

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

Преди да започнете да рисувате, трябва да получите екземпляр на обекта на уеб браузър CanvasRenderingContext2D за това платно. Това става чрез извикване на единствения метод getContext на обекта HTMLCanvasElement. например:

Методът getContext приема един параметър, низът "2d". Връща метод на екземпляр на обекта CanvasRenderingContext2D, представляващконтекст за рисуване на това платно.

След това можете да започнете да рисувате върху платното, като използвате много различните свойства и методи на обекта CanvasRenderingContext2D, които ще бъдат обсъдени по-подробно в заключителната лекция и практическите упражнения.

CSS и елементът canvas

Платното може да има същите стилови атрибути като img > (поле, рамка, фон и т.н.). Ако не е посочен стил, той първоначално е напълно прозрачен.

Както при повечето HTML елементи, за добавяне на граници, интервали, полета и т.н. Можете да използвате CSS стилове върху елемента canvas. Освен това някои CSS атрибути се наследяват от съдържанието на платното. Шрифтовете са добър пример за това, тъй като шрифтовете, изчертани върху платното, по подразбиране са с настройките, използвани за самия елемент на платното.

Ключови термини и определения

Аварийно съдържание- Този термин се отнася до съдържанието на нови HTML5 тагове като audio > , видео > , платно > , който се показва, ако браузърът на потребителя не поддържа посочените тагове.

Кратко обобщение

Тази лекция е доста кратка. Ние специално не искахме да докосваме свойствата и методите, които ви позволяват да рисувате върху платното. Това ще бъде темата на следващата лекция.

Основното нещо, което трябва да разберете, когато говорите за платно > това е, че действителното изображение се генерира от страна на клиента чрез уеб скриптове. В същото време няма нужда от допълнителни плъгин модули и други неща. Така или иначе трябва да бъде и към това се стреми HTML5 като стандарт. Сега използвайте canvas > трябва да се направи внимателно, като се уверите, че сте включили аварийно съдържание.