Канвас (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

Бележки[редактиране | редактиране на кода]

  1. ↑ Ian Hixie. Extending HTML // 12 юли 2004. Посетен на 13 юни 2011.
  2. ↑ Mozilla Developer Connection. HTMLCanvasElement // Архивиран от оригинала на 2011-06-04. Посетен на 13 юни 2011.
  3. ↑ Opera 9.0 changelog
  4. ↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
  5. ↑ [whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007
  6. ↑ HTML Working Group Patent Policy Status – Known Disclosures
  7. ↑ W3C patent policy in use by HTML working group
  8. ↑ Sucan, Mihai. SVG or Canvas? Choosing between the two // Opera Software, 4 Feb 2010. Посетен на 3 май 2010.

Външни препратки[редактиране | редактиране на кода]

  Тази страница частично или изцяло представлява превод на страницата Canvas element в Уикипедия на английски. Оригиналният текст, както и този превод, са защитени от Лиценза „Криейтив Комънс – Признание – Споделяне на споделеното“, а за съдържание, създадено преди юни 2009 година – от Лиценза за свободна документация на ГНУ. Прегледайте историята на редакциите на оригиналната страница, както и на преводната страница, за да видите списъка на съавторите. ​

ВАЖНО: Този шаблон се отнася единствено до авторските права върху съдържанието на статията. Добавянето му не отменя изискването да се посочват конкретни източници на твърденията, които да бъдат благонадеждни.​

Взето от „https://bg.wikipedia.org/w/index.php?title=Канвас_(HTML)&oldid=11968881“.