HTML5 Canvas Элементі: 2D Графика және Қолданбалары

Кіріспе

HTML элементі
HTML элементі

Canvas элементі HTML5 құрамына кіреді және 2D пішіндер мен растрлік суреттерді динамикалық түрде, скрипт арқылы көрсетуге мүмкіндік береді. Бұл растрлік кескінді жаңартатын төмен деңгейлі процедуралық модель. HTML5 Canvas 2D ойындар жасауға да көмектеседі. HTML5 Canvas өзінің 2D сурет салу API-ін ұсынады, сонымен қатар OpenGL ES арқылы 3D рендерингті жүзеге асыру үшін WebGL API-ін де қолдайды.

Тарих

Canvas бастапқыда 2004 жылы Apple компаниясы Mac OS X WebKit компонентінде пайдалану үшін енгізді, ол Dashboard виджеттері мен Safari браузері сияқты қолданбаларды қамтамасыз етті. Кейін, 2005 жылы Gecko браузерлерінің 1.8 нұсқасында, ал 2006 жылы Opera браузерінде қолданысқа алынып, келесі буын веб-технологияларының жаңа ұсынылған ерекшеліктері бойынша Веб гипертексттік қолданбалар технологиясы жұмыс тобы (WHATWG) тарапынан стандартталды.

Қолданылуы

Canvas - биіктігі мен ені атрибуттарымен HTML кодында анықталған сурет салуға арналған аймақ. JavaScript коды басқа әдеттегі 2D API-лерге ұқсас сурет салу функцияларының толық жиынтығы арқылы осы аймаққа қол жеткізе алады, соның арқасында динамикалық түрде графика жасауға болады. Canvas-ты қолданудың күтілетін мысалдарының ішінде графиктер құру, анимациялар, ойындар және кескіндерді біріктіру бар. Canvas-пен өзара әрекеттесу үшін, canvas-тың көрсету контекстін алу қажет, ол canvas API, WebGL немесе WebGL2 көрсету контексін пайдалануды анықтайды.

Canvas және масштабталатын векторлық графика (SVG)

SVG – шолғыштарда пішіндерді салуға арналған баламалы тәсіл. Растрлық негізделген кенептен (canvas) айырмашылығы, SVG векторлық негізделген, сондықтан әрбір суреттелген пішін сахналық граф немесе құжат объектілік моделіне нысан ретінде есте сақталады, ол кейіннен бит картасына (bitmap) түрлендіріледі. Бұл SVG нысанының атрибуттары өзгерсе, браузер автоматты түрде көріністі қайта шығара алады дегенді білдіреді. Ал кенеп нысандары (canvas objects) дереу түсіріледі (immediate mode). Жоғарыдағы кенеп үлгісінде (canvas example) тікбұрышты сызу операциясы кенепті өзгертеді, ал оның тікбұрышты бейнелеуін жүйе ұмытып кетеді. Егер тікбұрыштың орналасуы өзгертілсе, онда кенепті қайтадан салу керек, оның ішінде тікбұрыштың астында қалған нысандар да. SVG-де тікбұрыштың орналасу атрибуттарын ғана өзгертуге болады, ал браузер оны қалай қайта бояу керектігін анықтайды. Кенеп элементінде (canvas element) SVG сияқты көрініс мүмкіндіктерін жасау үшін кенеп моделін абстракциялайтын қосымша JavaScript кітапханалары бар. Сонымен қатар бірнеше кенеп қабаттарын (canvas layers) пайдалануға болады, яғни өзгерістер қажет болған кезде тек нақты қабаттарды қайта құру қажет. SVG суреттері XML форматында бейнеленеді, ал күрделі көріністерді XML өңдеу құралдарымен құруға және сақтауға болады. SVG сахналық графигі оқиғаларды басқарушыларды (event handlers) нысандармен байланыстыруға мүмкіндік береді, сондықтан тікбұрыш onClick оқиғасына жауап беруі мүмкін. Кенеппен (canvas) бірдей функционалдылықты алу үшін тышқанның басу координаттарын (mouse click coordinates) сызылған тікбұрыштың координаттарымен қолмен сәйкестендіріп, оның басылған-басылмағанын анықтау керек. Тұжырымдамалық тұрғыдан, кенеп (canvas) – бұл жоғары деңгейдегі интерфейстерді құрастыруға болатын төменгі деңгейдегі API (мысалы, SVG қолдауы). SVG-ді ұсынбайтын, бірақ Android 2.x браузерлері сияқты, кенепті (canvas) қолдауы бар браузерлер үшін кенепті (canvas) пайдалана отырып, SVG-ді жарым-жартылай іске асыруды қамтамасыз ететін JavaScript кітапханалары бар. Алайда, әдетте бұл олай емес, өйткені олар – тәуелсіз стандарттар. Бұл жағдай күрделі, өйткені кенеп үшін (canvas) сахналық графикалық кітапханалар бар, ал SVG кейбір бит картасын өңдеу (bitmap manipulation) функционалдығына ие.

SVG is an alternative approach to drawing shapes in browsers. Unlike canvas, which is raster based, SVG is vector based, so that each drawn shape is remembered as an object in a scene graph or Document Object Model, which is subsequently rendered to a bitmap. This means that if attributes of an SVG object are changed, the browser can automatically re render the scene. Canvas objects, on the other hand, are drawn in immediate mode. In the canvas example above, the rectangle draw operation modifies the canvas, and its representation as a rectangle is forgotten by the system. If the rectangle's position were to be changed, the canvas would need to be redrawn, including any objects that might have been covered by the rectangle. In the equivalent SVG case, one could simply change the position attributes of the rectangle and the browser would determine how to repaint it. There are additional JavaScript libraries that abstract the canvas model to have svg like scene capabilities within the canvas element. Multiple canvas layers can also be used, meaning that only specific layers need to be recreated when changes are required. SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools. The SVG scene graph enables event handlers to be associated with objects, so a rectangle may respond to an onClick event. To get the same functionality with canvas, one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked. Conceptually, canvas is a lower level API upon which higher level interfaces might be built (for example, SVG support). There are JavaScript libraries that provide partial SVG implementations using canvas for browsers that do not provide SVG but support canvas, such as the browsers in Android 2. x. However, this is not normally the case—they are independent standards. The situation is complicated because there are scene graph libraries for canvas, and SVG has some bitmap manipulation functionality.

Реакциялар

Оның енгізілу кезінде веб-стандарттар қауымдастығы canvas элементіне қарама-қайшы пікірлер білдірді. Apple компаниясының SVG стандартын қолдау орнына жаңа, эксклюзивті элемент жасау туралы шешіміне қарсылықтар болды. Атау кеңістігінің жоқтығы сияқты синтаксис бойынша да басқа да алаңдаушылықтар бар.

Қаламға арналған зияткерлік меншік

2007 жылдың 14 наурызында WebKit әзірлеушісі Дэйв Хайат Apple компаниясының аға патенттік кеңесшісі Хелен Плотка Уоркманнан келіп түскен электрондық хатты жіберді, онда Apple компаниясы 2005 жылдың 24 наурызындағы WHATWG веб-қосымшаларының 1.0 нұсқасының жұмыс жобасының 10.1-тарауына, яғни “Графика: биттік карта” тақырыбына қатысты барлық зияткерлік меншік құқықтарын сақтайтынын мәлімдеді. Бірақ егер аталған сипаттама стандарттау органына формалды патент саясатымен берілсе, патенттерді лицензиялау мүмкіндігін де қарастырды. Бұл веб-дамытушылар арасында кең пікірталас тудырып, WHATWG-дің World Wide Web Consortium (W3C) ұйымының роялтисіз лицензияларды нақты қолдауымен салыстырғанда патенттерге қатысты саясатының болмауына қатысты сұрақтар көтерді. Кейіннен Apple компаниясы патенттерін W3C ұйымының роялтисіз патенттік лицензиялау шарттары бойынша жариялады. Бұл жариялау Apple компаниясын Canvas элементі HTML жұмыс тобы құрамында жасалған болашақ W3C ұсынысының бір бөлігі болған жағдайда, патентке роялтисіз лицензия беруге міндеттейді.

Құпиялылық мәселесі

Canvas саусақ іздерін алу – HTML5 canvas элементін пайдалана отырып, веб-сайттарға келушілерді анықтауға және қадағалауға мүмкіндік беретін браузер саусақ іздерін алу техникаларының бірі. Бұл техника 2014 жылы Принстон университеті мен KU Leuven университетінің зерттеушілері «The Web never forgets» атты мақаласында сипаттағаннан кейін кеңінен танымал болды. Canvas саусақ іздерін алуға қатысты құпиялылық алаңдаушылықтарының негізгі мәселесі – тіпті cookie файлдарын жою және кэшті тазалау пайдаланушыларға онлайн қадағалаудан толығымен құтылуға жеткіліксіз.

Браузерді қолдау

Элемент қазіргі нұсқаларында Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Opera және Microsoft Edge қолдайды.