НОУ ИНТУИТ | Введение в современные веб-технологии. Лекция 14: Перспективы и расширения HTML

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 01.09.2010 | Уровень: для всех | Доступ: свободно | ВУЗ: Сибирский федеральный университет

Вам нравится? Нравится 74 студентам

| Поделиться |

Поддержать программу

Canvas

Этот новый HTML-элемент предоставляет API для рисования. В отличие от SVG, Canvas оперирует не объектами (текст, линия, кривая), а точками, т.е. выполнение, например, команды fillRect создаст на холсте нарисованный прямоугольник, но не предоставит нового объекта, аналогичного rect в SVG, которым можно было бы манипулировать при помощи набора свойств и методов DOM, и который мог бы реагировать на внешние события. Зато работа Canvas с точечной графикой более эффективна, чем в SVG. Несколько команд рисования показано в примере 21.1.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Canvas 2D</title>
	<style type="text/css">
		div {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 600px;
			height: 400px;
			margin: -200px 0 0 -300px;
		}
	</style>
</head>
<body>
	<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->

	<script type="text/javascript">
		window.onload = function() {
			/*получаем ссылку на холст*/
			var canvas = document.getElementById('myCanvas');
			/*контекст*/
			var context = canvas.getContext('2d');
			/*создаём градиент*/
			var myGradient = context.createLinearGradient(0, 0, 600, 400);
			/*добавляем цветовые позиции к градиенту*/
			myGradient.addColorStop(0, "green");
			myGradient.addColorStop(1, "white");
			/*устанавливаем созданный градиент как стиль заливки*/
			context.fillStyle = myGradient;
			/*заливаем прямоугольную область*/
			context.fillRect(0, 0, 600, 400);

			/*определяем стиль текста*/
			context.font = "bold 50px sans-serif";
			/*цвет обводки*/
			context.strokeStyle = 'black';
			/*толщина линий*/
			context.lineWidth = '3.0';
			/*цвет заливки*/
			context.fillStyle = 'yellow';
			/*выравнивание текста*/
			context.textAlign = "center";
			context.textBaseline = "middle";
			/*рисуем обводку текста*/
			context.strokeText('Hello, World!', 300, 200);
			/*рисуем заливку текста*/
			context.fillText('Hello, World!', 300, 200);

		}
	</script>

	<div>
		<canvas id="myCanvas" width="600" height="400">
	      </canvas>
	</div>

</body>
</html>

Листинг 21.1. Рисование при помощи Canvas

В настоящее время элемент Canvas поддерживается большинством популярных браузеров, за исключением IE. Однако, IE поддерживает язык разметки векторной графики VML, который позволяет частично эмулировать Canvas, и для эмуляции создана Javascript-библиотека ExplorerCanvas (см. пример 21.1 - в нём к HTML-странице подключается скрипт excanvas.js ). Таким образом, этот элемент с некоторыми ограничениями использовать можно.

Ссылка на спецификацию: http://www.w3.org/TR/html5/the-canvas-element.html

Хранилище DOM

Ещё один полезный механизм, заложенный в проект спецификации HTML 5 и уже реализованный в IE8, а также в ряде других браузеров - хранилище DOM.

С помощью хранилища DOM, как и с помощью файлов Cookie, веб-разработчики могут сохранять данные на стороне клиента для конкретного сеанса ( sessionStorage ) или специфические данные домена ( localStorage ) в виде пар имя-значение.

Хранилище DOM может предоставить значительно больше дискового пространства, чем файлы Cookie. В Internet Explorer в файлах Cookie можно сохранить только 4 КБ данных. В хранилище DOM в IE8 предоставляется приблизительно 10 МБ для каждой области хранения (в других браузерах - несколько меньше).

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

Пример 14.2 иллюстрирует основные приёмы работы с хранилищем.

<!DOCTYPE html>
<html>
<head>
  <title>Сохранение сеанса</title>

  <script type="text/javascript">
    var list;
    window.onload = function() {
      //сохраняем ссылку на список (она будет использоваться часто)
      list = document.getElementById('list');
      var StorageSupported = false;
      //определяем, поддерживается ли хранилище:
      //некоторые браузеры создают исключение при обращении к sessionStorage -
      //поэтому помещаем проверку в блок try/catch
      try {
        if (sessionStorage) StorageSupported = true;
      }
      catch (e) { }


      if (StorageSupported) {
        //поддержка есть - сообщим об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'поддерживает'.fontcolor('green') + ' хранилище сеанса';
        //проходим в цикле по всем элементам, уже сохранённым в хранилище (если есть)
        for (var n = 0; n < sessionStorage.length; n++) {
          var key = sessionStorage.key(n);
          //помещаем их ключи и значения в список list
          list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
        }
      }
      else {
        //поддержки нет - также сообщаем об этом
        document.getElementById('msg').innerHTML = 
          'Ваш браузер ' + 'не поддерживает'.fontcolor('red') + ' хранилище сеанса';
        //получаем ссылку на массив элементов формы
        var formElems = document.forms[0].elements;
        //и делаем их недоступными (disabled)
        for (i = 0; i < formElems.length; i++) {
          formElems[i].disabled = 'disabled';
        }
      }
    }

    //это событие возникает (если браузер его поддерживает) при изменении в хранилище
    document.onstorage = function() {
      //опустошаем список
      while (list.hasChildNodes()) { list.removeChild(list.firstChild); }

      //и воссоздаём его на основе изменившегося хранилища
      for (var n = 0; n < sessionStorage.length; n++) {
        var key = sessionStorage.key(n);
        list.options[list.options.length] = new Option(key + ': ' + sessionStorage[key], key);
      }
    }
  </script>

</head>
<body>
  <h1>
    Страница 1</h1>
  <h2 id="msg">
  </h2>
  <form action="">
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info1</code>:</p>
  <textarea cols="50" rows="5" id="info1" onkeyup="if(value) sessionStorage.setItem('info1', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info2</code>:</p>
  <textarea cols="50" rows="5" id="info2" onkeyup="if(value) sessionStorage.setItem('info2', value);"></textarea>
  <p>
    Здесь вы можете ввести произвольный текст, который будет сохранён в хранилище
    сеанса под ключом <code>info3</code>:</p>
  <textarea cols="50" rows="5" id="info3" onkeyup="if(value) sessionStorage.setItem('info3', value);"></textarea>
  <p>
    <label>
      Ключи, существующие в хранилище сеанса:<br />
      <br />
      <select id="list" size="3" style="width: 200px;">
      </select>
    </label>
    <br />
    <input type="button" value="Поместить в textarea" onclick="if(list.value) 
  document.getElementById(list.value).value = sessionStorage[list.value]" />
    <input type="button" value="Удалить выделенный" 
    onclick="if(list.value) sessionStorage.removeItem(list.value);" />
    <br />
    <input type="button" value="Удалить все" onclick="sessionStorage.clear();" />
    <input type="button" value="Обновить список" onclick="document.onstorage()" />
    <br />
    <br />
    <a href="Ext_sessionStorage_page2.htm">Перейти на страницу 2</a></p>
  </form>
</body>
</html>

Листинг 21.2. Сохранение сеанса при помощи механизма sessionStorage

Упражнения.

Введите произвольный текст в области ввода. При необходимости нажмите кнопку "Обновить список" (браузер IE8 обрабатывает событие onstorage, остальные - пока нет). Список отображает введённые блоки текста, сохранённые в хранилище сеанса.

Перейдите на страницу 2: а) в той же вкладке; б) в новой вкладке: в) начав новый сеанс (если используется IE8). Проследите в каждом случае: 1) отображаются ли в списке блоки, сохранённые на странице 1; 2) изменится ли список на странице 1, если его изменить на странице 2 (в случае "а" должен).

Откройте код страницы 1 в редакторе и измените везде sessionStorage на localStorage. Запустите изменённую страницу и убедитесь, что данные в локальном хранилище доступны даже после перезапуска браузера.

Пользоваться рассматриваемой технологией следует с осторожностью, поскольку лишь последние версии популярных браузеров её поддерживают. Поэтому на хранилище DOM следует возлагать задачи, связанные с повышением удобства пользователя (например, запоминание состояния страницы), но не с принципиальными моментами, касающимися функционирования приложения.

Ссылки:

http://dev.w3.org/html5/webstorage

http://msdn.microsoft.com/ru-ru/library/cc197062(VS.85).aspx

http://blogs.msdn.com/giorgio/archive/2009/11/29/ie8-and-html-5.aspx

Дальше >>

Авторизоваться

Введение в современные веб-технологии

Перспективы и расширения HTML

Canvas

Хранилище DOM

Вопросы и ответы