Справочник по CMS Atomax version 2.0
 

HTML5 canvas


Следующая статья: 

Содержание

В чем сила HTML5?

Ранее интернет - страницы содержали либо обыденный текст, пусть и с форматированием, либо же заблаговременно приготовленные изображения в растровых форматах JPEG/GIF/PNG, время от времени приправленные анимацией. Flash с его векторной природой и динамическим рисованием сделал просто революцию - стало может быть генерировать анимацию прямо на лету, реагируя на деяния пользовательа, масштабировать ее и накладывать разные эффекты. Обыденный HTML был лишен такового счастья и мог оперировать только знаками и объектами документа, но не отдельными графическими примитивами вроде линий либо точек. Ну что ж, сейчас это все в прошедшем.

Canvas - это одна из самых ожидаемых и массивных способностей в HTML5.

Как смотрится работа с графикой?

Ты просто создаешь особый тег, внутри которого, в обозначенном прямоугольнике, имеешь возможность работать впрямую с пикселями и графическими примитивами вроде фигур, линий, окружностей и тому схожее, и все это доступно для управления программным методом через Javascript. Если ты пробовал программировать еще в DOS либо интересовался, как делают игры, то должен представлять, какие чувства вызывает необходимость отрисовывать по пикселям и выводить каждую линию. Но ранее - то и этого не было. Если разработчики впору сообразят и выпустят развитые библиотеки для рисования, можно сказать, что Flash, в конце концов - то, обречен.

Простой пример использования canvas:

function draw()

{ var canvas = document.getElementById("canvas"); if (canvas.getContext)

{ var ctx = canvas.getContext("2d");

ctx.fillStyle = "rgb(200.0, 0)";

ctx.fillRect (10, 10, 55, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";

ctx.fillRect (30, 30, 55, 50);

}

}

<body onload="draw();">

<canvas id="canvas" width="150" height="150"> </canvas>

</body>

Canvas, не новый либо уникальный?

Издавна есть возможность отрисовывать, используя различные ухищрения вроде специального языка VML в браузерах от Microsoft либо свободных форматов SVG в Мозилла либо Safari. Но годится это разве что для рисования графиков, для которых не требуется много ресурсов.

Canvas - совершенно другое дело. Производители браузеров заявили, что уже могут улучшить такие операции, передавая их на видеокарту. Сейчас браузер будет есть не только лишь память и микропроцессор, да и GPU. В последних версиях Гугл Chrome и Internet Explorer 9 beta для ускорения работы с графикой в элементе canvas употребляется аппаратная поддержка и DirectX API.

Что имеешь, не хранишь

Если ты пробовал делать что - нибудь труднее домашней страницы, наверное сталкивался с ситуацией, когда на стороне клиента нужно сохранить какую - то информацию, чтоб 100 раз не гонять ее по сети с сервера. Ранее единственным вариантом было просто глупо загнать ее в Javascript - переменную, но она жила только то время, пока страничка была открыта в браузере. Закрыл страничку - и все невозвратно исчезало. Если клиент возвратился на web сайт, то все приходилось загружать поначалу, даже если ничего не поменялось. Cookies с задачей хранения данных не управлялись, и единственное, что могли предложить - хранение идентификатора, который для тебя приходилось уже привязывать на сервере к данным пользовательа. Ну и много ли можно сохранить в небольшой кэш (можно хранить в одной «печеньке» неболее 2 Кб)? К тому же они посылаются на сервер с каждым HTTP - запросом, что безмерно раздувает сетевой трафик.

Новенькая фишка - WebStorage либо DOM Storage - призвана разгрузить приложение, перенося часть данных на клиентскую сторону. К примеру, если у тебя есть онлайн - магазин, то данные о самых фаворитных товарах можно хранить сходу у клиента, только временами его обновляя и чем больше данных, тем заметнее выигрыш. Разработчики получают единый механизм доступа к данным, независимость хранилища от web сайта, стойкость не только лишь к закрытию вкладки либо окна браузера, да и к полной перезагрузке компьютера. Сколько данных можно так хранить? По спецификации объем данных не ограничивается, но на самом деле Internet Explorer разрешает до 10 Мб на домен, в Firefox чуток скромнее - до 5 Мб. Внезапно, но в деле реализации спецификации хранилища Microsoft реально впереди всех других браузеров, потому что реализует не только лишь рекомендованные спецификации, да и наращивает лимиты, добавляет полезные характеристики. К примеру. Internet Explorer 8 - единственный, кто может сказать, сколько же памяти реально занято данными, другие браузеры этого и близко не могут. По спецификации хранилищ может быть два - session, когда данные животрепещущие только для текущей вкладки (но при всем этом можно уходить на другие web сайты, данные сохраняются), и local - уже истинное неизменное хранилище, привязанное к домену, где оно было сотворено (для поддоменов будут свои хранилища).

Работать с хранилищами данных проще обычного - это на самом деле, престижная сегодня NoSQL (я уже писал об таковой архитектуре) база данных. Можно положить (set), получить (get) и удалить (remove) значение переменной, данные при всем этом могут быть хоть какими, главное, чтоб это были строчки либо приводимые к ним форматы. Можно также удалить все (clear) и выяснить объем (length). Работа с хранилищем осуществляется так же. как и с обыденным хешем в Javascript. К примеру, сохраним перечень друзей пользовательа:

window.localStorage[myfriend] = JSON.stringify( [(name:"Вася".email:"vasja@xakep.ru"), (name:"Alex", email:"aleks@xakep.ru")]);

Вот как-то так, товарищи.














© 2008–2018. Korvin Industries. Все права защищены.
 

Я выбираю Хостинг: