Википедија

Платно (канвас) елемент

Платно као елемент је део HTML-а 5 и омогућава динамичко рендеровање дводимензионалних облика и битмап слика помоћу скрипти. Представља процедурални модел ниског нивоа који ажурира битмапу и који нема уграђен сценски граф.

Историја уреди

Платно је 2004. године увела компанија Епл у WebKit Mac OS X[1] за апликације као што су Dashboard виџети и Сафари. 2005. године уведен је и у Геко (лејаут енџин)[2] и 2006. године у Оперу[3]. Стандардизован је од стране радне групе WHATWG (енгл. Web Hypertext Application Technology Working Group).

Употреба уреди

Платно се састоји од регије по којој може да се црта и која је дефинисана са атрибутима "висина" и "ширина". JavaScript код може да приступи овој површини преко скупа функција за цртање које су налик на онима из других честих 2D API-ја, чиме омогућава динамичко генерисање графике. Неке очекиване употребе платна су: цртање графова, анимације, игре и композиција слике.

Пример уреди

Следећи код креира канвас елемент на једној HTML страници: 

<canvas id="primer" width="200" height="200">
Овај текст се приказује ако ваш претраживач не подржава HTML5 платно.
</canvas>

Коришћењем JavaScript-а може се цртати по платну: 

var example = document.getElementById('primer');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Овај код црта црвени правоугаоник на екрану.

Платно API такође омогучава чување и поновно враћање вредности атрибута контекста платна.

Површина канвас елемента или површина за цртање уреди

Платно заправо има две величине: величину самог елемента и величину површине елемента за цртање. Додељивањем вредности атрибутима висине и ширине елемента додељујемо вредности атрибутима обема ових величина; CSS атрибути утичу само на величину елемента а не на површину за цртање.

И величина елемента и величина његове површине за цртање као почетне вредности имају следеће: 300 пиксела ширине и 150 пиксела висине. У набрајању које је приказано у примеру који користи CSS да сетује величину платна, величина елемента је ширине 600 пиксела и висине 300 пиксела, али величина површине за цртање остаје непромењена, тј. 300 пиксела × 150 пиксела. Када се величина платна не поклапа са величином површине за цртање, претраживач скалира површину за цртање тако да она одговара величини елемента (што може да доведе до неочекиваних и нежељених ефеката).

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

<!DOCTYPE html>
<html>
<head>
<title>Величина елемента платна: 600 x 300,
Величина површине за цртање платна: 300 x 150</title>
<style>
body {
background: #dddddd;
}
#canvas {
margin: 20px;
padding: 20px;
background: #ffffff;
border: thin inset #aaaaaa;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<canvas id="canvas">
Платно није подржано.
</canvas>
</body>
</html>

Платно или скалабилна векторска графика (СВГ) уреди

СВГ је ранији стандард за цртање облика у претраживачу. Међутим, за разлику од платна, које је базирано на растерској графици, СВГ је базирана на векторима тј. сваки нацртани облик се бележи као објекат у сценском графуили у објектном моделу документа који се затим рендерује у битмапу. Ово значи да, ако се атрибути СВГ-е промене, претраживач може аутоматски да поново рендерује сцену.

У примеру изнад, једном када се правоугаоник нацрта, чињеница да је нацртан се нигде не памти у систему. Ако би му се позиција променила, цела сцена би морала да се поново нацрта, укључујући и оне објекте преко којих је нацртан правоугаоник. У еквивалентном примеру код СВГ-е, када би дошло до мењања атрибута правоугаоника претраживач би одредио како да га поново нацрта. Постоје додатне JavaScript библиотеке које додају способности сценског графа елементу платна. Такође је могуће да се после бојења платна у слојевима могу поновно креирати одређени слојеви.

Слике СВГ-е су представљене у XML-у, и комплексне сцене се могу креирати и одржавати алатима за едитовање XML-а.

Сценски граф СВГ-е омогућава да се баратање догађајима асоцира са објектима, тако да правоугаоник може да одговори на onClick догађај. Да би се добила иста функционалност када је у питању платно, координате клика миша и координате нацртаног правоугаоника се морају поклапати да би се утврдило да ли је кликнуто на правоугаоник.

Концептуално, платно је апликациони програмски интерфејс ниског нивоа на основу кога се може направити енџин који, на пример, подржава СВГ. Постоје JavaScript библиотеке које омогућавају делимичну имплементацију СВГ-е коришћењем платна за претраживаче који не омогућавају СВГ-у али подржавају платно, као што су, на пример, претраживачи у Андроид оперативном систему верзија 2.x. Међутим, ова ситуација је компликована јер постоје библиотеке сценских графова за платно а СВГ има неке функционалности манипулације битмапа.

Реакције уреди

У време када је представљен елемент платна, добио је мешовите реакције од стране заједнице веб стандарда. Постојали су аргументи против Еплове одлуке да се креира нови власнички елемент уместо да се подржи стандар СВГ-е. Постојале су и бриге око синтаксе, на пример, одсуство namespace-а [4]

Интелектуална својина када је у питању канвас елемент уреди

На дан 14. марта 2007. године, Дејв Хајат (радио је на развоју WebKit-а) проследио је имејл који је добио од Епловог сениор савета за патенте[5], који је наводио да је Епл компанија резервисала сва интелектуална права везана за WHATWG-ове веб апликације[6] али да остављају отворена врата лиценцирању патента у случају да се спецификације пренесу телу стандарда са формалном полисом патента. Ово је изазвало значајну дискусију међу развијачима веба и покренуло питања везана за WHATWG-ов недостатак полиса над патентима у поређењу са WWW конзорцијумовим (W3C) експлицитним фаворизовањем лиценца без повластица које се остварују плаћањем[7]. Компанија Епл је касније обелоданила патенте под условима W3C-ове лиценце без повластица које се остварују плаћањем. Епл компанија је морала да омогући лиценцирање патента кад год елемент платна буде постао део будуће W3C препоруке креиране од стране HTML радне групе.[8]

Подршка претраживача уреди

Елемент платна подржавају тренутне верзије претраживача Mozilla Firefox Google Chrome, Internet Exploer, Safari, и Opera[9]. Старије верзије Internet Exploer-a, верзија 8 и раније, не подржавају платно, међутим Google и Mozilla подржавају.[10]

Детаљан преглед подршке платна када су у питању најпопуларнији веб претраживачи[11] (као проценат поделе тржишта од јула 2013. године):

   Интернет експлорер       Фајерфокс       Сафари (Десктоп)       Кроум      Опера (Десктоп)       Сафари (Мобилни уређаји)       Опера (Мобилни уређаји)       Андроид претраживачи   
6.0 2.0 - 6.0 3.1 - 3.2 4.0 - 13.0 9.0 - 11.0 3.2 10.0 2.0
7.0 7.0 4.0 14.0 11.1 4.0 11.0 2.1
8.0 8.0 5.0 15.0 11.5 4.2 - 4.3 11.1 2.3,3.0
9.0 9.0 5.1 16.0 11.6 5.0 11.5 4.0
20% 17% 7% 36% 1% 4% 3% 5%

Види још уреди

Референце уреди

  1. ^ Hixie, Ian (12. 7. 2004). „Extending HTML”. Приступљено 13. 6. 2011. 
  2. ^ Mozilla Developer Connection. „HTMLCanvasElement”. Архивирано из оригинала 04. 06. 2011. г. Приступљено 13. 6. 2011. 
  3. ^ „Opera 9.0 changelog”. Архивирано из оригинала 21. 04. 2012. г. Приступљено 28. 05. 2015. 
  4. ^ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  5. ^ „Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007”. Архивирано из оригинала 2. 5. 2007. г. Приступљено 28. 5. 2015. 
  6. ^ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
  7. ^ HTML Working Group Patent Policy Status – Known Disclosures
  8. ^ W3C patent policy in use by HTML working group
  9. ^ Sucan, Mihai (4. 2. 2010). „SVG or Canvas? Сhoosing between the two”. Opera Software. Архивирано из оригинала 23. 06. 2010. г. Приступљено 3. 5. 2010. 
  10. ^ „Mozilla drags IE into the future with Canvas element plugin”. Ars Technica. 19. 8. 2008. Приступљено 12. 5. 2010. 
  11. ^ „Compatibility tables for the support of HTML5, CSS3, SVG”. Приступљено 27. 7. 2011. 

Спољашње везе уреди

Преузето из „https://sr.wikipedia.org/w/index.php?title=Платно_(канвас)_елемент&oldid=26975233”