Канвас (HTML)
Тази статия вероятно е резултат от машинен превод, има неверен синтаксис и/или неуточнени специални термини и трудно разбираем текст. Ако желаете да помогнете на Уикипедия, използвайте опцията редактиране в горното меню над статията, за да нанесете нужните корекции. |
Тази статия или секция е все още незавършена. Информацията не е достатъчно изчерпателна, възможно е някои важни факти по темата да липсват или да не са съвсем точни. Можете да помогнете, като добавите информация, подкрепена с източници. |
Канвас елемент е част от HTML5, който дава възможност за динамично четене на код от 2D форма и bitmap изображения. Това е ниско ниво, процедурален модел, който се актуализира с bitmap и не разполага с вградени сценични графики
История
[редактиране | редактиране на кода]Канвас първоначално е представена от Apple за използване в своя mac OS x В WebKit компонент през 2004 г.[1] включването на приложения, като например Dashboard, джаджи и Safari браузър. По-късно, през 2005 г. той е приет във версия 1.8 Gecko – браузъри,[2] и Opera през 2006 г.[3]
Използване
[редактиране | редактиране на кода]Канвас се състои от област в която може да се поставят определени в HTML кода с височина и широчина атрибути. В JavaScript код може да получи достъп до района чрез пълен набор от чертожни функции сходни с други обичайни 2D API интерфейси, което дава възможност за динамично генерирани графики. Някои от предполагаемите видове използване на канвас включва създаване на графики, анимация, игри и песни.
Пример
[редактиране | редактиране на кода]Даденият код създава Канвас елемент в HTML страница.
<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
С помощта на JavaScript можете да рисувате върху платно: Този код рисува червен правоъгълник на екрана.
Платно на API предоставя методът save() и restore(), за опазване и възстановяване на всички атрибути в контекста на платното.
Размерът на канвас елемент в сравнение с чертежната площ
[редактиране | редактиране на кода]Канвас в действителност има два размера: Размер на позиция и размер на елемента от фигурата на повърхността. Настройването на елемент на широчина и височина поставя и двата размера; CSS атрибутите влияят само върху размера на елемента, а не върху площта на рисуване.
По подразбиране и двата канвас размера на позицията и размер на повърхността му фигура на екрана са 300 пиксела широчина и 150 пиксела височина. В списъка е показано примера в който се използва CSS, за да се установи размер на елемента, размер на елемент е 600 пиксела в ширина и 300 пиксела във височина, но размерът на повърхността на рисунката остава непроменен в стойност по подразбиране 300 пиксела × 150 пиксела. Когато размера на канвас елемента не съответства на размера на повърхността на рисунка, браузърът ги пропорционира.(което може да доведе до неочаквани и нежелани ефекти).
Един Пример за настройка на размера на елемент и чертежната площ за различни стойности.
Канвас срещу Scalable Vector Graphics (SVG)
[редактиране | редактиране на кода]SVG е по-ранен стандарт за рисуване на фигури в браузърите. Въпреки това, за разлика от канвас, която е растерно базирана SVG е векторно базирана т.е., всяка нарисувана фигура е запомнена като обект в сценичен граф или Document Object Model, който по-късно ще се превърне в растерно изображение. Това означава, че ако атрибутите на обекта SVG не са променени, браузърът може автоматично повторно да прочете картината.
От друга страна канвас елементите, са рисувани в immediate mode. В канвас примера по-горе, след като правоъгълникът е нарисуван моделът от който е нарисуван е забравен от системата. Ако позицията е променена, цялата тази сцена трябва да бъде пренарисувана, включително и всички обекти, които са били в границите на правоъгълникът. Но в еквиваленто на SVG случай, може просто да се промени позицията на атрибутите на правоъгълникът и браузърът ще определи как да го прерисува. Има допълнителни библиотеки за JavaScript, които придават сценично графирани възможности на канвас елемент. Също така можете да боядисате канвас в няколко слоя, а след това и да пресъздаде някои специфични слоеве.
SVG изображенията, представени в XML формат, и сложни сцени могат да бъдат създадени и съхранявани в XML инструменти за редактиране.
В SVG сценичната графика дава възможност на работещите върху събитията да са свързани с обекти, така че правоъгълник може да отговори на onClick
събитие. За да се получи същата функционалност с канвас, трябва ръчно да отговарят на координатите на мишката с координатите на нарисувания правоъгълник, за да определи дали тя е натиснат.
Концептуално, канвас е API на ниско ниво, при което двигателят поддържа, например SVG може да бъде построен. Има JavaScript-библиотека, които предоставят частично SVG имплементация използвайки канвас за браузъри, които не осигуряват SVG но подпомага канвас, като браузъри в Android 2.х. Това обаче не е случаят—те са независими стандарти. Ситуацията се усложнява от факта, че има сценични графични библиотека за Canvas и SVG има някои bitmap манипулационни функции.
Реакция
[редактиране | редактиране на кода]При въвеждането му канвас елемента е изпълнен с противоречията на уеб стандартите. Имало е аргументи срещу Apple за създаването на нов идентичен елемент вместо подкрепа на стандартите на SVG. Има и други притеснения по отношение на синтаксиса, например, липсата на пространство.[4]
Интелектуална собственост върху канвас
[редактиране | редактиране на кода]На 14 март 2007 създателят на WebKit Дейв Hyatt получава електронно писмо от Apple, старши патентен адвокат, Елена Плотка служителят,[5] който заяви, че Apple запазва всички интелектуални собствености свързани с уеб приложението на WHATWG. Това предизвика голяма дискусия сред уеб разработчици, както и въпроси, свързани с WHATWG като средство-това е липса на политика по отношение на патенти, в сравнение с World Wide Web Consortium (W3C) в полза на роялти-картофи лиценз. Apple по-късно заявява патенти в роялти-картофи лиценз.[6] В края Apple трябва да предоставят роялти-картоф за лицензиране на патент, когато канвас елемент става част от бъдещето на W3C препоръка е създадена от HTML работна група.[7]
Браузър поддръжка
[редактиране | редактиране на кода]Елементът поддържа актуални версии на Mozilla Firefox, Google chrome, internet Explorer, Safari, konqueror и Opera.[8]
Вижте също
[редактиране | редактиране на кода]- Анти-отглеждане на зърнени култури геометрия (ARR)
- Кайро (графика)
- Платно на пръстови отпечатъци
- Сравнение на двигатели (HTML5 canvas)
- Дисплей Послепис
- Интерфейс графични устройства (GDI+)
- Кварцов 2Д
- Мащабиращи векторни графики (SVG файл)
- В webgl
Бележки
[редактиране | редактиране на кода]- ↑ Ian Hixie. Extending HTML // 12 юли 2004. Посетен на 13 юни 2011.
- ↑ Mozilla Developer Connection. HTMLCanvasElement // Архивиран от оригинала на 2011-06-04. Посетен на 13 юни 2011.
- ↑ Opera 9.0 changelog
- ↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
- ↑ [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007
- ↑ HTML Working Group Patent Policy Status – Known Disclosures
- ↑ W3C patent policy in use by HTML working group
- ↑ Sucan, Mihai. SVG or Canvas? Choosing between the two // Opera Software, 4 Feb 2010. Посетен на 3 май 2010.
Външни препратки
[редактиране | редактиране на кода]- [1]
- Платно Описание На уеб приложения whatwg като средство за спецификация на проекта
- Линк към страницата на платното за разработчици на Apple за свързване
- Основната канву учебник по Оперному общност от разработчици
- Платно на учебник, както и въвеждащи страници на разработчик на Mozilla център Архив на оригинала от 2012-08-03 в Wayback Machine.
Тази страница частично или изцяло представлява превод на страницата Canvas element в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите.
ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни. |