Таг <цанвас> ХТМЛ5

Нова таг таг <цанвас> ХТМЛ5 није присутна у претходним верзијама, која се може користити за цртање и рад са графиком.

Таг <цанвас> треба програмски језик подржава, као што су ЈаваСцрипт за правилно функционисање и врши у потпуности свој потенцијал.

Сврха овог чланка је да илуструје основне коришћење нових ознаке, али неке тачке на које се стална употреба практичних примера, надам се, ће олакшати учење.

Премиса

Као апсолутна новина у најбољем платну се не подржавају сви претраживачи, тако да је могуће да су демонстрације примера у овом чланку не приказује исправно.
Тест је спроведен са Гоогле Цхроме-у, на којима нисте имали никаквих проблема.

Користите <цанвас> таг

Заједничко коришћење Платно таг је прилично једноставан и не разликује од других ХТМЛ тагове.
Формално Платно је једноставан контејнер и, као такав, има отвор Таг (<цанвас>) и затварање (</ Платно>):

 <цанвас ид="есемпио" видтх="196" хеигхт="96">

 





 Елемент није подржан







 </ Платно>

Ако димензије нису назначено експлицитно (помоћу атрибута ширине и висине), величине додељена контејнер је подразумевана, основна правоугаоника са висине од 300 и 150.
Ид атрибут, наравно, није битно, али, по мом мишљењу, увек је добра идеја да позове да има јединствени референтни за сваки објекат који се користи на страници.

Текст део ограничен <цанвас> и </ платно> да представља напомену показује када графика није подржан у Вашем бровсеру.

Пре него што почиње са имплементацијом детаљима тестирања потенцијалних платна са једноставним кода за тестирање живи:

 <цанвас ид="бандиерина" видтх="180"> хеигхт = "100"> није подржан </ Платно>







 <сцрипт типе="тект/јавасцрипт">







 вар платну = доцумент.гетЕлементБиИд ('Застава');







 вар ц = цанвас.гетЦонтект ('2 г ');







 ц.филлСтиле = '# ФФ0000';







 ц.филлРецт (0,0,180,100);







 ц.филлСтиле = '# ФФФФФФ';







 ц.филлРецт (0,0,120,100);







 ц.филлСтиле = '# 00ФФ00';







 ц.филлРецт (0,0,60,100);







 </ Сцрипт>

На овој страници можете видети резултат овог кода (да бисте видели правилно излаз, морате имати, опет, прегледач који подржава ХТМЛ 5).

Као што смо већ најавили на почетку чланка у овом делу кода експлицитне чињеница да платно рад користећи скрипт. Из овог примера можемо одмах да обратите пажњу на стандардне технике за издвајање променљивих објекта платну у позадини:

 / / Креирање ставке платну по ИД







 вар платну = доцумент.гетЕлементБиИд ('Застава');









 / / Креирање новог дводимензионалног објекат на платну







 вар ц = цанвас.гетЦонтект ('2 г ');

Јавасцрипт гетЕлементБиИд начин чува објекат у променљиве платну, кроз вредност својих ид области; гетЦонтект ('2 г ') узима контекст, или објекат који нуди програмер број метода за рад са платно као пожељни (у нашем случају да желите да радите са дводимензионалне графике функција, односно, 2Д).

На следећим странама ћемо списак неке основне операције корисне за програмера намерава да искористи платна.

• <<
• 1
• 2
• 3
• 4
• 5
• >>