Canvas (HTML)

Canvas ( англ. canvas - " полотно ") - елемент HTML5, призначений для створення растрового двомірного зображення за допомогою JavaScript.


1. Історія

Вперше елемент canvas був представлений компанією Apple в движку WebKit для Mac OS X з метою подальшого його використання в додатках Dashboard і Safari.

Ситуацію з відсутністю canvas в IE виправила компанія Google, випустивши власне розширення, написане на JavaScript, під назвою ExplorerCanvas [1].

На сьогоднішній день canvas частіше використовується для побудови графіків, простий анімації та ігор в браузерах [2]. Група WHATWG пропонує використовувати canvas як стандарт для створення графіки в нових поколіннях веб-додатків [3].

Організація Mozilla Foundation веде проект під назвою Canvas 3D [4], метою якого є додати низкоуровневую підтримку графічних прискорювачів для відображення тривимірних зображень через HTML-елемент canvas. Поряд з цим вже існує бібліотеки, реалізують роботу з тривимірними моделями, серед них tree.


2. Можливості

canvas дозволяє розмістити на полотні: картинку, відео, текст. Залити все це суцільним текстом, або обвести контури або навіть додати градієнт [5]. Додавання тіней схожих на властивості css3 box-shadow і text-shadow. І, нарешті, отрісовка фігур за допомогою вказівки контрольних точок. Причому, можна змінювати як ширину ліній, так і кисть малювання ліній, стиль з'єднань ліній [6]

3. Атрибути

У цього елемента крім універсальних і подієвих атрибутів доступно всього два атрибути: height задає висоту полотна. За замовчуванням 300 пікселів. width задає ширину полотна. За замовчуванням 150 пікселів.

4. Підтримка

IE [7] Firefox Safari Chrome Opera iPhone Android
7.0 + 3.0 + 3.0 + 3.0 + 10.0 + 1.0 + 1.0 +

5. API

Для роботи із зображеннями є дві функції getImageData( x, y, width, height ) і putImageData( x, y, width, height ), перша отримує вміст канви з умовою, що вся інформація з цього ж сайту [8], друга вставляє результат першого на полотно.

Для очищення квадрата (заповнення білим кольором) і використовується функція clearRect( x, y, width, height ).

Для малювання прямокутників використовують функції strokeRect( x, y, width, height ) і fillRect( x, y, width, height ), перший обводить контур, другий заливає фігуру.

Для малювання дуг використовую функцію arc( x, y, radius, startAngle, endAngle, anticlockwise ),

Для накреслення складних фігур, або ж просто ліній, використовують наступну комбінацію beginPath(), після цього розставляються точки за допомогою команд moveTo( x, y ) і lineTo( x, y ) (перша зміщує курсор у вказану позицію, друга переміщує курсор і ставить контрольні точки у вихідній і кінцевій позиціях). Якщо необхідно намалювати іншу фігуру, то вам варто викликати процедуру closePath() і почати з операції з початку. Для обведення або зафарбовування фігури з контрольних точок просто викличте stroke() і fill() відповідно.

Для малювання кривих Безьє є дві функції quadraticCurveTo( Px, Py, x, y ) і bezierCurveTo( P1x, P1y, P2x, P2y, x, y ), перша малює криву Безьє другого порядку від поточної точки на полотні до вказаної через проміжну [9 ], друга малює трохи простіше.

Щоб змінити колір зафарбовування достатньо змінити параметр fillStyle (задавати кольори можна аналогічно css). Щоб змінити колір обвідних ліній використовуйте strokeStyle таким же чином.


6. Особливості

  • Зміна висоти або ширини полотна зітре весь його вміст і всі налаштування, простіше кажучи він створиться заново. [10];
  • Початок відліку (точка 0,0) знаходиться в лівому верхньому кутку. Але її можна зрушувати. [11];
  • 3D контексту немає, є окремі розробки, але вони не стандартизовані [12];
  • Колір тексту можна вказувати аналогічно css, втім, як і розмір шрифту.

7. Приклади або патерни оптимізації

У випадку, якщо вам немає необхідності перемальовувати полотно, але потрібно проводити маніпуляції з ним, то ви можете "сфотографувати" весь полотно і зберегти в змінну. І працювати вже з цим малюнком, не змушуючи канву отрісовиваємих після кожної маніпуляції.

Якщо все зображення не повинно обновлятися, а тільки частина його, то ви можете прати певну зону на полотні і малювати її заново.

Браузери можуть оптимізувати анімації йдуть одночасно, зменшивши число reflow і repaint до одного, що в свою чергу призведе до підвищення точності анімації. Наприклад анімації на JavaScript синхронізовані з CSS transitions або SVG SMIL. Плюс до всього якщо виконується анімація в Табі, який невидимий, браузери не будуть продовжувати перемальовування, що призведе до меншого використання CPU, GPU, пам'яті і як наслідок знизить витрату батареї в мобільних пристроях [13]. Для цього використовуйте requestAnimationFrame.


8. Використання

Використання та операції з елементом можливі тільки через JavaScript.

   <  html  >  <  head  >  <  title  >  Canvas  <  /  title  >  <  script  type  =  "Text / javascript"  src  =  "Example.js"  >  <  /  script  >  <  /  head  >  <  body  >  <  canvas  id  =  "Canvas"  >  Цей елемент не підтримується  <  /  canvas  >  <  /  body  >  <  /  html  > 
 function  onLoadHandler  (  )  {  var  canvas  =  document.  getElementById  (  'Canvas'  )  ;  context  =  canvas.  getContext  (  '2 D '  )  ;  / / Тут операції з канвою  }  window.  onload  =  onLoadHandler  ; 

9. Приклади

Створення на сторінці canvas-елемента
 <  html  >  <  head  >  <  title  >  Приклад використання  <  /  title  >  <  /  head  >  <  body  >  <  canvas  >  Цей текст буде показаний, якщо не підтримується canvas.  <  /  canvas  >  <  /  body  >  <  /  html  > 
Використання JavaScript для малювання кола
 <  html  >  <  head  >  <  title  >  circle  <  /  title  >  <  /  head  >  <  body  >  <  canvas  id  =  'Example'  >  Оновіть браузер  <  /  canvas  >  <  script  type  =  "Text / javascript"  >  var canvas = document.getElementById ("example"); var context = canvas.getContext ("2d"); function drawCircle (x, y, r) {context.arc (x, y, r, 0, 2 * Math. PI, false);} context.beginPath (); drawCircle (150, 75, 50); context.lineWidth = 15; context.strokeStyle = "# 0f0"; context.stroke ();  <  /  script  >  <  /  body  >  <  /  html  > 
Отрисовка на canvas обдуваемого дерева Піфагора
    Дерево Піфагора </ title> <span> < </span> script type <span> = </span><span> "Text / javascript" </span><span> > </span><span> / / Функція малює під кутом angle лінію з вказаної точки довжиною ln </span><span> function </span> drawLine <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> angle <span> ) </span><span> { </span> context. <span> moveTo </span><span> ( </span> x <span> , </span> y <span> ) </span><span> ; </span> context. <span> lineTo </span><span> ( </span><span> Math </span> . <span> round </span><span> ( </span> x <span> + </span> ln <span> * </span><span> Math </span> . <span> cos </span><span> ( </span> angle <span> ) </span><span> ) </span><span> , </span><span> Math </span> . <span> round </span><span> ( </span> y <span> - </span> ln <span> * </span><span> Math </span> . <span> sin </span><span> ( </span> angle <span> ) </span><span> ) </span><span> ) </span><span> ; </span><span> } </span><span> / / Функція малює дерево </span><span> function </span> drawTree <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> minLn <span> , </span> angle <span> ) </span><span> { </span><span> if </span><span> ( </span> ln <span> > </span> minLn <span> ) </span><span> { </span> ln <span> = </span> ln <span> * </span><span> 0.75 </span><span> ; </span> drawLine <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> angle <span> ) </span><span> ; </span> x <span> = </span><span> Math </span> . <span> round </span><span> ( </span> x <span> + </span> ln <span> * </span><span> Math </span> . <span> cos </span><span> ( </span> angle <span> ) </span><span> ) </span><span> ; </span> y <span> = </span><span> Math </span> . <span> round </span><span> ( </span> y <span> - </span> ln <span> * </span><span> Math </span> . <span> sin </span><span> ( </span> angle <span> ) </span><span> ) </span><span> ; </span> drawTree <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> minLn <span> , </span> angle <span> + </span><span> Math </span> . <span> PI </span><span> / </span><span> 4 </span><span> ) </span><span> ; </span> drawTree <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> minLn <span> , </span> angle <span> - </span><span> Math </span> . <span> PI </span><span> / </span><span> 6 </span><span> ) </span><span> ; </span><span> / / Якщо поставити кут Math.PI / 4, то вийде класичне дерево </span><span> } </span><span> } </span><span> / / Ініціалізація змінних </span><span> function </span> init <span> ( </span><span> ) </span><span> { </span><span> var </span> canvas <span> = </span> document. <span> getElementById </span><span> ( </span><span> "Tree" </span><span> ) </span><span> ; </span><span> var </span> x <span> = </span><span> 100 </span><span> + </span><span> ( </span> canvas. <span> width </span><span> / </span><span> 2 </span><span> ) </span><span> ; </span><span> var </span> y <span> = </span><span> 170 </span><span> + </span> canvas. <span> height </span><span> ; </span><span> / / Положенні стовбура </span><span> var </span> ln <span> = </span><span> 120 </span><span> ; </span><span> / / Початкова довжина лінії </span><span> var </span> minLn <span> = </span><span> 5 </span><span> ; </span><span> / / Мінімальна довжина лінії </span> canvas. <span> width </span><span> = </span><span> 480 </span><span> ; </span><span> / / Ширина полотна </span> canvas. <span> height </span><span> = </span><span> 320 </span><span> ; </span><span> / / Висота полотна </span> context <span> = </span> canvas. <span> getContext </span><span> ( </span><span> "2d" </span><span> ) </span><span> ; </span> context. <span> fillStyle </span><span> = </span><span> "# Ddf" </span><span> ; </span><span> / / Колір фону </span> context. <span> strokeStyle </span><span> = </span><span> "# 020" </span><span> ; </span><span> / / Колір ліній </span> context. <span> fillRect </span><span> ( </span><span> 0 </span><span> , </span><span> 0 </span><span> , </span> canvas. <span> width </span><span> , </span> canvas. <span> height </span><span> ) </span><span> ; </span> context. <span> lineWidth </span><span> = </span><span> 2 </span><span> ; </span><span> / / Ширина ліній </span> context. <span> beginPath </span><span> ( </span><span> ) </span><span> ; </span> drawTree <span> ( </span> x <span> , </span> y <span> , </span> ln <span> , </span> minLn <span> , </span><span> Math </span> . <span> PI </span><span> / </span><span> 2 </span><span> ) </span><span> ; </span> context. <span> stroke </span><span> ( </span><span> ) </span><span> ; </span><span> } </span> window. <span> onload </span><span> = </span> init <span> ; </span><span> </ </span> script <span> > </span> </ Head> <body> <canvas id="tree"> </ canvas> </ body> </ html> </pre></div></div></div></div></div></div></body></html></canvas>

Цей текст може містити помилки.

Схожі роботи | скачати

Схожі роботи:
HTML
Елементи HTML
Фрейм (HTML)
Редактор HTML
Кольори HTML
Кодування символів в HTML