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

Запознайте се с елемента Canvas

Използвайте елемент платно е много проста

Когато чуете думата платното, вие веднага се сещат за новите HTML5 елементи със същото име. Технически, това е само половината от истината, но нека не говорим за това сега. Елементът платно - новост за всички браузъри.

За да се използва платно елемент, просто трябва да се създаде подходящ HTML таг, а след това да определи ширината и височината.

Но това със сигурност не е всичко. Код написано по-горе, ще поставите на вашия платно страница с прозрачен фон. Забележка: съдържанието вътре платно етикет ще се появи само ако вашият браузър е остарял и не поддържа тази функция.

Тази позиция е за повечето съвременни браузъри

Трябва да се отбележи, че повечето съвременни браузъри поддържат този елемент, дори и най-новия Internet Explorer.

Между другото, можете да активирате този елемент и в по-ранните версии на Internet Explorer, с помощта на този плъгин - Explorer платно.

размери на елементите на платното

В примера по-горе намира вече видяхте как да използват ширината и височината атрибути: ширина и височина. Използване на CSS, можете да контролирате размера на платно, подобно на други HTML елементи. И това е съвсем логично. Въпреки това, тъй като платното използва в своята функционална връзка на т.нар двуизмерен, а след това прилагане на CSS с размера на платното, да доведе до факта, че всички вътрешни компоненти ще бъде нарушена.

Малко двуизмерен контекст

А малко по-висока, аз казах, че елементът на платно - това е само половината от историята. Втората половина - точно това е двуизмерен контекст, който по същество ви позволява да видите цялата сила и функционалността на даден елемент.

координата

Ако някога сте работили с езици, които се занимават с 2D графика (като ActionScript, обработка и т.н.), тогава знаете всичко за координатни системи, базирани на движение. Двуизмерният контекста, в елемент платно не се различава от тези системи. Тя използва стандартен Декартова координатна система с началната точка (0, 0), разположен в лявата горна страна. Движение надясно ще увеличи стойността обект на оста х, а низходящото движение ще увеличи стойността на точки на обекта заедно у оста. Това е доста примитивен.

Една единица на тази координатна система е равна на един пиксел на екрана (в повечето случаи).

Получаването на достъп до двуизмерен контекст

В резултат на това метод CTX променливата на повикване getContext сега ще се отнасят до двуизмерен контекст. Това означава, че сега сте с помощта на променливата може да започне да се направи фигури върху платното. Супер, а?!

изготвят площади

Сега, когато имаме достъп до двуизмерен контекст безопасно можете да започнете да се насладите на всички функции на по-горе API. Един от най-често използваните функции е fillRect, което създава черни квадрати (по подразбиране).

Добавете следния код с помощта на променливата на CTX, ние говорихме за това и преди:

Този код ще изготви черен квадрат в горната лява част на платното. Подобно на това тук:

Честито! Вие току-що съставя първата си фигура в платно елемент HTML5. Как се чувстваш?

Методът може да бъде предписван fillRect 4 параметъра:

• Първо - това е позицията по оста х;
• Второ - това е позицията на у ос;
• трета от - един параметър, отговорен за широчината;
• Четвърто - е височината.

Ако боя метода на прототип в псевдо-код, тя ще изглежда по следния начин:

Тази функция може да отнеме набор от аргументи, като fillRect. В резултат на това вие ще получите още един квадрат:

Точно. Елегантна. И още веднъж лесно! Сега разбирам, принципите, на която елемент платното работи. Всички други методи като тези двамата. Използвайте ги, толкова лесно. Ако мислите, че това е нещо примитивно, но не се притеснявайте. Всички тези елементи заедно може да направи чудеса.

схема за чертане

В допълнение към кутиите (които могат да бъдат изготвени от един от най-API), можете също да се направи форми по своя собствена схема. Благодарение на схемите можете да създадете прави или криви линии, както и по-сложни форми.

За да се създаде цялостна верига, ще трябва да се използват следните методи за приложния програмен интерфейс:

• beginPath: начало верига;
• moveTo: метод за създаване на точка;
• lineTo: чертае линия от точка до точка, която се създава от moveTo, или до точката на последния ред, изготвен от lineTo;
• closePath: за завършване на веригата.
• попълнете: попълнете формата с цвят.
• инсулт: да се създаде верига.

Опитайте следния пример:

Този код ще изготви черен триъгълник:

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

Струва си да се казва за него точно сега: въз основа на схемата, използвана за създаване на по-сложни форми от правоъгълници.

Промяна на цветове

Декларирам тук по принцип няма нищо, така че нека веднага да ги приложи на практика:

Този код ще се оцвети квадратен червено:

Или можете да промените цвета на рамката на площада:

Така че можете да се научат да прилагат следните методи:

Методи fillStyle strokeStyle и са удобни с това, че те използват един и същи цвят и чрез вашия любим CSS. Това означава, че можете да използвате RGB, RGBA, HSA, специални думи ( "червен") или шестнадесетични стойности.

Веднага трябва да се отбележи, че промяната на цвета не води до преобразуване на съществуващо съдържание платно елемент. Например, ако се направи черен правоъгълник, а след това създаде пълнител за червения цвят, а след това привлече още един правоъгълник, първата цифра ще остане черно.

Дебелината на промяна линия

Можете да добавите този код в предишния пример:

И това е това, което получавате резултати:

Същият принцип може да се прилага за схемите. Например, можете да модифицирате примера с триъгълника:

И това е това, което получавате:

Изтриване на обекти от Canvas

Последното нещо, което искам да ви покажа днес - това размиване на обектите. Вече знаете как да се направи на фигурата. Сега е време да научите как да се отървете от него :)

В този пример платното 500px ширина и 500px височина. За почистване на цялата област, трябва да направите следното:

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

Забележка: аргументите за метод clearRect са същите, както за fillRect; х, у, ширина и височина.

Ако още не сте решили на височината и ширината, можете да го напиша по този начин:

Изтриване малки фрагменти

За да се изтрие един малък фрагмент, вие не сте почистили цялата площ на платното. Можете да изтриете желаната от вас зона без проблеми. Представете си, че са изготвили 2 квадрата, единият от които искате да изтриете:

В момента картината е както следва:

Можете без проблеми може да заличи черен квадрат, а червената отляво на място от метод clearRect:

Имайте предвид, че данните трябва да са идентични с тези, които сте посочили при създаването му елемент. В действителност, този метод просто се променя прозрачността на пиксела са всеки:

Доста проста, нали? Вие няма да често се измива елементи в чертежа, но знанието, което трябва, когато се научите да правите анимацията.

Отиваме с времето

Платно е лесен за използване и да научат

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

В следващата статия, ние ще разгледаме някои напреднали техники за работа с елемент платно, като например рисуване елипси, криви и други неща. Ако това не е достатъчно, а след това и в бъдеще ние ще ви покажем как да се трансформират обекти (завъртане, намаляване, увеличаване), как да работите с изображения, както и as'll работа с анимация. Това ще бъде много интересно, можете да вземете думата си за него.

И сега, надявам се да има много полезна информация, която ще ви позволи да получите обща представа за платното. Този елемент - това е фантастична технология, която ще ви позволи да се реализират всички фантазии, които се съхраняват в главата ти.

5 урока от последната колона "HTML и DHTML"

Когато пишете или отстраняване на грешки PHP скриптове, ние често използваме var_dump () и print_r (), за да изведете разнообразни разширени данни и обекти. В този пост искам да ви разкажа за функция var_export (), който може да конвертирате масив във формат, подходящ за PHP код.

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!

Свързани статии

• Интраперитонеално прилагане на лекарствени разтвори на смеси телета прилага до 3 дни, за да

• Referat- методи за прилагане на лекарството

• Html5 платното елемент