Canvas (HTML)

Поделись знанием:
(перенаправлено с «Canvas»)
Перейти к: навигация, поиск
   HTML

Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript[1]. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока[2]. Размер пространства координат не обязательно отражает размер фактической отображаемой площади[2]. По умолчанию его ширина равна тремстам пикселям, а высота ста пятидесяти[2].

Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх. Но также может использоваться для встраивания видео в страницу и создания полноценного плеера.

Используется в WebGL для аппаратного ускорения 3D графики[3].

Компанией Google была выпущена JavaScript библиотека [code.google.com/p/explorercanvas/ explorercanvas], которая позволяла работать с Canvas в браузерах IE7 и IE8.

Canvas может усложнить задачу роботам по распознаванию Капчи. При использовании canvas с сервера загружается не картинка, а набор точек (или алгоритм прорисовки), по которым браузер прорисовывает картинку (капчу)[4].





История

Впервые элемент canvas был представлен компанией Apple в движке WebKit для Mac OS X с целью последующего его использования в приложениях Dashboard и Safari[1].

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

На сегодняшний день canvas чаще используется для построения графиков, простой анимации и игр в браузерах[6]. Группа WHATWG предлагает использовать canvas как стандарт для создания графики в новых поколениях веб-приложений[7].

Организация Mozilla Foundation ведёт проект под названием Canvas 3D[8], целью которого является добавить низкоуровневую поддержку графических ускорителей для отображения трёхмерных изображений через HTML-элемент canvas. Наряду с этим существуют библиотеки, реализующие работу с трёхмерными моделями, среди них [github.com/mrdoob/three.js/ three].

Поддержка

IE Firefox Safari Chrome Opera iOS Android
9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 3.0+ 1.0+

Возможности

canvas позволяет разместить на холсте: картинку, видео, текст. Залить всё это сплошным цветом, либо обвести контуры или даже добавить градиент[9]. Добавление теней похожих на свойства css3 box-shadow и text-shadow. И, наконец, отрисовка фигур с помощью указания контрольных точек. Причём можно изменять как ширину линий, так и кисть рисовки линий, стиль соединений линий[10].

Особенности

  • Изменение высоты или ширины холста сотрет всё его содержимое и все настройки, проще говоря он создастся заново[11];
  • Начало отсчёта (точка 0,0) находится в левом верхнем углу[12]. Но её можно сдвигать[13];
  • 3D контекста нет, есть отдельные разработки, но они не стандартизованы[14];
  • Цвет текста можно указывать аналогично CSS, впрочем, как и размер шрифта.

Примеры или паттерны оптимизации

В случае, если вам нет необходимости перерисовывать холст, но нужно производить манипуляции с ним, то вы можете «сфотографировать» весь холст и сохранить в переменную. И работать уже с этим рисунком, не заставляя канвасу отрисовываться после каждой манипуляции.

Если обновляться должно не всё изображение, а только его часть, то вы можете стирать определенную зону на холсте и рисовать её заново.

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

Все текущие браузеры имеют фильтр размытия изображения при его увеличении. Его стоит использовать, если вы часто попиксельно обрабатываете картинку. Путём уменьшения картинки, например, в два раза и последующего аппаратного увеличения её с помощью фильтра[16].

Если игра позволяет отдельно обрабатывать фон и элементы игры, то имеет смысл сделать два холста друг над другом[17].

Для очистки канвы лучшим средством будет использование clearRect[17], однако, если очищать только необходимые участки, то скорость возрастет ещё больше.

Критика

  • Чрезмерно нагружает процессор и оперативную память;
  • Из-за ограничения сборщика мусора, нет возможности очистить память;
  • Необходимо самому обрабатывать события с объектами[18];
  • Плохая производительность при высоком разрешении[18];
  • Приходится отрисовывать отдельно каждый элемент[18].
  • Возможность создания на страницах специальныx «маячков», т.н. Canvas Fingerprinting, для отслеживания пользователей в сети.

Преимущества

  • В отличие от SVG гораздо удобнее иметь дело с большим числом элементов;
  • Имеет аппаратное ускорение[16][19];
  • Можно манипулировать каждым пикселем[18];
  • Можно применять фильтры обработки изображений[18];
  • Есть много библиотек[18].

Использование

Использование и операции с элементом возможны только через JavaScript.

<!doctype html>
<html lang="ru">
  <head>
    <title>canvas</title>
    <script src="example.js"></script>
  </head>
  <body>
    <canvas id="canvas">Этот элемент не поддерживается</canvas>
  </body>
</html>

Файл example.js

function onLoadHandler() {
  var canvas  = document.getElementById('canvas'),
      context = canvas.getContext('2d');
  /*
    Далее какие-либо действия над холстом
  */
}
window.onload = onLoadHandler;

Примеры

Библиотеки

  • libCanvas — лёгкий, но тем не менее функциональный фреймворк canvas
  • Processing.js — порт языка визуализации Processing
  • EaselJS — библиотека с API похожим на Flash
  • PlotKit — библиотека для создания чартов и графики
  • Rekapi — API Canvas для создания анимации на кейфреймах
  • PhiloGL — фреймворк WebGL для визуализации данных, разработки игр и креативного кодирования.
  • JavaScript InfoVis Toolkit — создает интерактивную 2D Canvas визуализацию данных для Web.
  • Frame-Engine — фреймворк для разработки приложений и игр.

См. также

Напишите отзыв о статье "Canvas (HTML)"

Примечания

  1. 1 2 [developer.mozilla.org/ru/docs/Web/Guide/HTML/Canvas_tutorial Руководство по Canvas (MDN)].
  2. 1 2 3 [www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element 4.12.4 The canvas element — HTML Standard].
  3. [developer.mozilla.org/ru/docs/Web/HTML/Canvas Canvas (MDN)].
  4. [result-systems.ru/home/captcha.html Пример построения капчи по точкам]
  5. [code.google.com/p/explorercanvas/ explorercanvas]. Проверено 7 февраля 2013. [www.webcitation.org/6EMUB7khd Архивировано из первоисточника 12 февраля 2013].
  6. [habrahabr.ru/post/127293 Google продвигает HTML5 как игровую платформу]. Проверено 7 февраля 2013. [www.webcitation.org/6EMUBWjBo Архивировано из первоисточника 12 февраля 2013].
  7. [www.whatwg.org/specs/web-apps/current-work/#canvas Спецификация от WHATWG]. Проверено 7 февраля 2013. [www.webcitation.org/6EMUI72ij Архивировано из первоисточника 12 февраля 2013].
  8. [wiki.mozilla.org/Canvas:3D Mozilla Canvas 3D]. Проверено 7 февраля 2013.
  9. [htmlbook.ru/html5/canvas Градиенты]. Проверено 7 февраля 2013. [www.webcitation.org/6EMUJ3zMm Архивировано из первоисточника 12 февраля 2013].
  10. [habrahabr.ru/post/119284/ Поработаем с линиями]. Проверено 8 февраля 2013. [www.webcitation.org/6EMUJt6MQ Архивировано из первоисточника 12 февраля 2013].
  11. [htmlbook.ru/html5/canvas Можно ли «перезагрузить» холст? // Спроси профессора Маркапа]. Проверено 5 июля 2013. [www.webcitation.org/6HvOr8IEn Архивировано из первоисточника 7 июля 2013].
  12. [htmlbook.ru/html5/canvas Координаты холста]. Проверено 5 июля 2013. [www.webcitation.org/6HvOr8IEn Архивировано из первоисточника 7 июля 2013].
  13. [habrahabr.ru/post/104718/ Canvas-трансформации доступным языком]. Проверено 5 июля 2013. [www.webcitation.org/6HvOsbELE Архивировано из первоисточника 7 июля 2013].
  14. [htmlbook.ru/html5/canvas Спроси профессора Маркапа: В. Есть холст 3D?]. Проверено 7 февраля 2013. [www.webcitation.org/6EMUJ3zMm Архивировано из первоисточника 12 февраля 2013].
  15. [habrahabr.ru/post/114358/ Продвинутые анимации с requestAnimationFrame]. Проверено 8 февраля 2013. [www.webcitation.org/6EMUMFLQt Архивировано из первоисточника 12 февраля 2013].
  16. 1 2 [habrahabr.ru/company/microsoft/blog/141482/ Как раскрыть мощь HTML5 Canvas для игр].
  17. 1 2 [www.html5rocks.com/ru/tutorials/canvas/performance/ Improving HTML5 Canvas Performance — HTML5 Rocks].
  18. 1 2 3 4 5 6 [stackoverflow.com/questions/2266416/what-are-the-advantages-disadvantages-of-canvas-vs-dom-in-javascript-game-devel What are the advantages/disadvantages of Canvas vs. DOM in JavaScript game development?]. Проверено 3 ноября 2013.
  19. [habrahabr.ru/post/141156/ Canvas с аппаратным ускорением в Google Chrome].

Ссылки

Примеры работы
  • [www.benjoffe.com/code/demos/canvascape/ 3D Walker]. Проверено 14 октября 2013.
  • [www.tapper-ware.net/canvas3d/ Racing 3D]. Проверено 14 октября 2013.
  • [drawastickman.com Интерактивная игра]. Проверено 14 октября 2013.
  • [dbcartajs.appspot.com/mosmetro.html Карта московского метро]. Проверено 2 ноября 2013.
  • [workshop.chromeexperiments.com/stars/ Карта звёздного неба]. Проверено 2 ноября 2013.
Для ознакомления
  • [www.w3schools.com/html/html5_canvas.asp HTML5 Canvas]. Проверено 31 октября 2013.
  • [developer.mozilla.org/ru/docs/HTML/Canvas MDN]. Проверено 31 октября 2013.
  • [www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html Living Standard]. Проверено 31 октября 2013.
  • [topolyan.com/w3c/html_canvas_2d_context_ru.html Спецификация Canvas 2D Context, перевод на русский]. Проверено 28 мая 2016.
  • [developer.android.com/reference/android/graphics/Canvas.html Android canvas]. Проверено 31 октября 2013.
  • [www.html5rocks.com/ru/tutorials/canvas/performance/ Оптимизация работы элемента canvas в HTML5]. Проверено 31 октября 2013.
  • [diveintohtml5.info/canvas.html diveintohtml5]. Проверено 31 октября 2013.
  • [w3pro.ru/article/html-5-canvas-dlya-nachinayushchikh Основы canvas]. Проверено 31 октября 2013.
  • [www.ibm.com/developerworks/web/library/wa-html5fundamentals4/?S_TACT=105AGX99&S_CMP=CP HTML5 fundamentals, Part 4: The final touch]. Проверено 31 октября 2013.
  • [www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.png Шпаргалка по Canvas]. Проверено 31 октября 2013.

Отрывок, характеризующий Canvas (HTML)

– Il a eu encore un coup, il y a une demi heure. Еще был удар. Courage, mon аmi… [Полчаса назад у него был еще удар. Не унывать, мой друг…]
Пьер был в таком состоянии неясности мысли, что при слове «удар» ему представился удар какого нибудь тела. Он, недоумевая, посмотрел на князя Василия и уже потом сообразил, что ударом называется болезнь. Князь Василий на ходу сказал несколько слов Лоррену и прошел в дверь на цыпочках. Он не умел ходить на цыпочках и неловко подпрыгивал всем телом. Вслед за ним прошла старшая княжна, потом прошли духовные лица и причетники, люди (прислуга) тоже прошли в дверь. За этою дверью послышалось передвиженье, и наконец, всё с тем же бледным, но твердым в исполнении долга лицом, выбежала Анна Михайловна и, дотронувшись до руки Пьера, сказала:
– La bonte divine est inepuisable. C'est la ceremonie de l'extreme onction qui va commencer. Venez. [Милосердие Божие неисчерпаемо. Соборование сейчас начнется. Пойдемте.]
Пьер прошел в дверь, ступая по мягкому ковру, и заметил, что и адъютант, и незнакомая дама, и еще кто то из прислуги – все прошли за ним, как будто теперь уж не надо было спрашивать разрешения входить в эту комнату.


Пьер хорошо знал эту большую, разделенную колоннами и аркой комнату, всю обитую персидскими коврами. Часть комнаты за колоннами, где с одной стороны стояла высокая красного дерева кровать, под шелковыми занавесами, а с другой – огромный киот с образами, была красно и ярко освещена, как бывают освещены церкви во время вечерней службы. Под освещенными ризами киота стояло длинное вольтеровское кресло, и на кресле, обложенном вверху снежно белыми, не смятыми, видимо, только – что перемененными подушками, укрытая до пояса ярко зеленым одеялом, лежала знакомая Пьеру величественная фигура его отца, графа Безухого, с тою же седою гривой волос, напоминавших льва, над широким лбом и с теми же характерно благородными крупными морщинами на красивом красно желтом лице. Он лежал прямо под образами; обе толстые, большие руки его были выпростаны из под одеяла и лежали на нем. В правую руку, лежавшую ладонью книзу, между большим и указательным пальцами вставлена была восковая свеча, которую, нагибаясь из за кресла, придерживал в ней старый слуга. Над креслом стояли духовные лица в своих величественных блестящих одеждах, с выпростанными на них длинными волосами, с зажженными свечами в руках, и медленно торжественно служили. Немного позади их стояли две младшие княжны, с платком в руках и у глаз, и впереди их старшая, Катишь, с злобным и решительным видом, ни на мгновение не спуская глаз с икон, как будто говорила всем, что не отвечает за себя, если оглянется. Анна Михайловна, с кроткою печалью и всепрощением на лице, и неизвестная дама стояли у двери. Князь Василий стоял с другой стороны двери, близко к креслу, за резным бархатным стулом, который он поворотил к себе спинкой, и, облокотив на нее левую руку со свечой, крестился правою, каждый раз поднимая глаза кверху, когда приставлял персты ко лбу. Лицо его выражало спокойную набожность и преданность воле Божией. «Ежели вы не понимаете этих чувств, то тем хуже для вас», казалось, говорило его лицо.
Сзади его стоял адъютант, доктора и мужская прислуга; как бы в церкви, мужчины и женщины разделились. Всё молчало, крестилось, только слышны были церковное чтение, сдержанное, густое басовое пение и в минуты молчания перестановка ног и вздохи. Анна Михайловна, с тем значительным видом, который показывал, что она знает, что делает, перешла через всю комнату к Пьеру и подала ему свечу. Он зажег ее и, развлеченный наблюдениями над окружающими, стал креститься тою же рукой, в которой была свеча.
Младшая, румяная и смешливая княжна Софи, с родинкою, смотрела на него. Она улыбнулась, спрятала свое лицо в платок и долго не открывала его; но, посмотрев на Пьера, опять засмеялась. Она, видимо, чувствовала себя не в силах глядеть на него без смеха, но не могла удержаться, чтобы не смотреть на него, и во избежание искушений тихо перешла за колонну. В середине службы голоса духовенства вдруг замолкли; духовные лица шопотом сказали что то друг другу; старый слуга, державший руку графа, поднялся и обратился к дамам. Анна Михайловна выступила вперед и, нагнувшись над больным, из за спины пальцем поманила к себе Лоррена. Француз доктор, – стоявший без зажженной свечи, прислонившись к колонне, в той почтительной позе иностранца, которая показывает, что, несмотря на различие веры, он понимает всю важность совершающегося обряда и даже одобряет его, – неслышными шагами человека во всей силе возраста подошел к больному, взял своими белыми тонкими пальцами его свободную руку с зеленого одеяла и, отвернувшись, стал щупать пульс и задумался. Больному дали чего то выпить, зашевелились около него, потом опять расступились по местам, и богослужение возобновилось. Во время этого перерыва Пьер заметил, что князь Василий вышел из за своей спинки стула и, с тем же видом, который показывал, что он знает, что делает, и что тем хуже для других, ежели они не понимают его, не подошел к больному, а, пройдя мимо его, присоединился к старшей княжне и с нею вместе направился в глубь спальни, к высокой кровати под шелковыми занавесами. От кровати и князь и княжна оба скрылись в заднюю дверь, но перед концом службы один за другим возвратились на свои места. Пьер обратил на это обстоятельство не более внимания, как и на все другие, раз навсегда решив в своем уме, что всё, что совершалось перед ним нынешний вечер, было так необходимо нужно.
Звуки церковного пения прекратились, и послышался голос духовного лица, которое почтительно поздравляло больного с принятием таинства. Больной лежал всё так же безжизненно и неподвижно. Вокруг него всё зашевелилось, послышались шаги и шопоты, из которых шопот Анны Михайловны выдавался резче всех.
Пьер слышал, как она сказала:
– Непременно надо перенести на кровать, здесь никак нельзя будет…
Больного так обступили доктора, княжны и слуги, что Пьер уже не видал той красно желтой головы с седою гривой, которая, несмотря на то, что он видел и другие лица, ни на мгновение не выходила у него из вида во всё время службы. Пьер догадался по осторожному движению людей, обступивших кресло, что умирающего поднимали и переносили.
– За мою руку держись, уронишь так, – послышался ему испуганный шопот одного из слуг, – снизу… еще один, – говорили голоса, и тяжелые дыхания и переступанья ногами людей стали торопливее, как будто тяжесть, которую они несли, была сверх сил их.
Несущие, в числе которых была и Анна Михайловна, поровнялись с молодым человеком, и ему на мгновение из за спин и затылков людей показалась высокая, жирная, открытая грудь, тучные плечи больного, приподнятые кверху людьми, державшими его под мышки, и седая курчавая, львиная голова. Голова эта, с необычайно широким лбом и скулами, красивым чувственным ртом и величественным холодным взглядом, была не обезображена близостью смерти. Она была такая же, какою знал ее Пьер назад тому три месяца, когда граф отпускал его в Петербург. Но голова эта беспомощно покачивалась от неровных шагов несущих, и холодный, безучастный взгляд не знал, на чем остановиться.
Прошло несколько минут суетни около высокой кровати; люди, несшие больного, разошлись. Анна Михайловна дотронулась до руки Пьера и сказала ему: «Venez». [Идите.] Пьер вместе с нею подошел к кровати, на которой, в праздничной позе, видимо, имевшей отношение к только что совершенному таинству, был положен больной. Он лежал, высоко опираясь головой на подушки. Руки его были симметрично выложены на зеленом шелковом одеяле ладонями вниз. Когда Пьер подошел, граф глядел прямо на него, но глядел тем взглядом, которого смысл и значение нельзя понять человеку. Или этот взгляд ровно ничего не говорил, как только то, что, покуда есть глаза, надо же глядеть куда нибудь, или он говорил слишком многое. Пьер остановился, не зная, что ему делать, и вопросительно оглянулся на свою руководительницу Анну Михайловну. Анна Михайловна сделала ему торопливый жест глазами, указывая на руку больного и губами посылая ей воздушный поцелуй. Пьер, старательно вытягивая шею, чтоб не зацепить за одеяло, исполнил ее совет и приложился к ширококостной и мясистой руке. Ни рука, ни один мускул лица графа не дрогнули. Пьер опять вопросительно посмотрел на Анну Михайловну, спрашивая теперь, что ему делать. Анна Михайловна глазами указала ему на кресло, стоявшее подле кровати. Пьер покорно стал садиться на кресло, глазами продолжая спрашивать, то ли он сделал, что нужно. Анна Михайловна одобрительно кивнула головой. Пьер принял опять симметрично наивное положение египетской статуи, видимо, соболезнуя о том, что неуклюжее и толстое тело его занимало такое большое пространство, и употребляя все душевные силы, чтобы казаться как можно меньше. Он смотрел на графа. Граф смотрел на то место, где находилось лицо Пьера, в то время как он стоял. Анна Михайловна являла в своем положении сознание трогательной важности этой последней минуты свидания отца с сыном. Это продолжалось две минуты, которые показались Пьеру часом. Вдруг в крупных мускулах и морщинах лица графа появилось содрогание. Содрогание усиливалось, красивый рот покривился (тут только Пьер понял, до какой степени отец его был близок к смерти), из перекривленного рта послышался неясный хриплый звук. Анна Михайловна старательно смотрела в глаза больному и, стараясь угадать, чего было нужно ему, указывала то на Пьера, то на питье, то шопотом вопросительно называла князя Василия, то указывала на одеяло. Глаза и лицо больного выказывали нетерпение. Он сделал усилие, чтобы взглянуть на слугу, который безотходно стоял у изголовья постели.
– На другой бочок перевернуться хотят, – прошептал слуга и поднялся, чтобы переворотить лицом к стене тяжелое тело графа.
Пьер встал, чтобы помочь слуге.