<?xml version="1.0" encoding="windows-1251"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<atom:link href="https://html5.mybb.ru/export.php?type=rss" rel="self" type="application/rss+xml" />
		<title>HTML5 - Язык гипертекстовой разметки 5-й версии</title>
		<link>http://html5.mybb.ru/</link>
		<description>HTML5 - Язык гипертекстовой разметки 5-й версии</description>
		<language>ru-ru</language>
		<lastBuildDate>Thu, 22 Dec 2011 02:00:39 +0400</lastBuildDate>
		<generator>MyBB/mybb.ru</generator>
		<item>
			<title>HTML5: старые теги нового назначения</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=8#p8</link>
			<description>&lt;p&gt;Всем известно, что теги &amp;lt;b&amp;gt;, &amp;lt;i&amp;gt;, &amp;lt;s&amp;gt;, &amp;lt;small&amp;gt; являются презентационными, а следовательно, исходя из парадигмы «структура, представление, поведение» их использование не приветствуется. Куда более привычными представляются элементы &amp;lt;strong&amp;gt;, &amp;lt;em&amp;gt;, &amp;lt;del&amp;gt;. Так было на протяжении долгих лет практики разработки. Однако многое поменялось в семантике этих элементов с приходом HTML5. Теперь у нас 4 новых тега со смыслом и каша в голове.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;&amp;lt;b&amp;gt; vs &amp;lt;strong&amp;gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Если раньше все учебники по вёрстке пестрили фразами вроде «используйте &amp;lt;strong&amp;gt; вместо &amp;lt;b&amp;gt;», и это было наполовину верно, то сегодня такая привычка может сыграть злую семантическую шутку. А дело всё в том, что авторы HTML5 предлагают использовать &amp;lt;b&amp;gt; для выделения отрывков текста с целью обратить внимание читателя, однако не подразумевая усиления значимости текста или интонации. Спецификация приводит примеры использования для разметки ключевых слов в документе&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 4.5em&quot;&gt;&lt;pre&gt;&amp;lt;p&amp;gt;The &amp;lt;b&amp;gt;frobonitor&amp;lt;/b&amp;gt; and &amp;lt;b&amp;gt;barbinator&amp;lt;/b&amp;gt; components are fried.&amp;lt;/p&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;и лидов (первый абзац статьи в журналистике)&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 16.5em&quot;&gt;&lt;pre&gt;&amp;lt;article&amp;gt;

 &amp;lt;h2&amp;gt;Kittens &#039;adopted&#039; by pet rabbit&amp;lt;/h2&amp;gt;

 &amp;lt;p&amp;gt;&amp;lt;b class=&amp;quot;lede&amp;quot;&amp;gt;Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.&amp;lt;/b&amp;gt;&amp;lt;/p&amp;gt;

 &amp;lt;p&amp;gt;Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.&amp;lt;/p&amp;gt;

&amp;lt;/article&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;В свою очередь &amp;lt;strong&amp;gt;, как и раньше, означает повышенную значимость своего содержимого.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;&amp;lt;i&amp;gt; vs &amp;lt;em&amp;gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Отныне &amp;lt;i&amp;gt; содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, &amp;lt;i&amp;gt; логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.)&lt;/p&gt;
						&lt;p&gt;&amp;lt;i&amp;gt;Per aspera ad Astra&amp;lt;/i&amp;gt; — в переводе с латыни изречение означает «Через тернии к звёздам».&lt;/p&gt;
						&lt;p&gt;&amp;lt;em&amp;gt; же означает эмфатическое ударение, эмоциональный акцент на данном отрывке текста. Это тот случай, когда в речи мы выделяем слова голосом (интонацией, громкостью и др.)&lt;/p&gt;
						&lt;p&gt;Казнить &amp;lt;em&amp;gt;нельзя&amp;lt;/em&amp;gt;, помиловать.&lt;/p&gt;
						&lt;p&gt;Внимательно читайте договор!&lt;/p&gt;
						&lt;p&gt;«Текст мелким шрифтом» (информация, являющаяся юридической формальностью, как то лицензия предприятия или юридический адрес и др.) мы, как правило, размечали элементом с классом, задающих в визуальных ПА более мелкий шрифт. Теперь же в нашем арсенале появился новый старый семантический элемент — &amp;lt;small&amp;gt;.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Холивар о &amp;lt;s&amp;gt;&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Раньше &amp;lt;s&amp;gt; был ни чем иным, как зачёркнутый текст. Теперь &amp;lt;s&amp;gt; представляет информацию, которая утратила свою актуальность. &lt;br /&gt;У нас также есть элемент &amp;lt;del&amp;gt;, результатом обработки которого по умолчанию в визуальных ПА является зачёркнутый текст. Он означает изменения в документе, и на первый взгляд их назначение может показаться одинаковым. Однако здесь есть тонкий момент. Рассмотрим пример страницы товара в интернет-магазине.&lt;br /&gt;На ней может быть указано две цены, одна из которых зачёркнута. Её мы размечаем элементом &amp;lt;s&amp;gt;. Это значит, что старая цена утратила свою актуальность (не важно когда это было, важен сам факт). Как проверить, что не &amp;lt;del&amp;gt;? &amp;lt;del&amp;gt; подразумевает изменения, внесённые в документ(важно то, что в некоторый момент времени документ был изменён). В нашем же случае, в новом документе уже содержится неактуальная информация.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Новая семантика и старый доктайп&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Если по каким-то непонятным причинам вы не можете заменить доктайп на новый и формально верстаете в HTML 4.01 — не отчаивайтесь. Используйте старые новые элементы с новым смыслом и со временем вы скажете себе «спасибо». Возможно, кто-то скажет, что это неправильно, но ведь эти элементы, кроме &amp;lt;s&amp;gt; даже не являются невалидными. Кроме того, HTML5 разрабатывался с расчётом на обратную совместимость, это же относится и к новой семантике старых элементов. Радикально ничего не изменилось, а добавилась лишь семантическая перчинка.&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 02:00:39 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=8#p8</guid>
		</item>
		<item>
			<title>HTML5: Web Workers и AJAX</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=7#p7</link>
			<description>&lt;p&gt;Все прочнее в среду разработчиков входит HTML5. Важным его достоинством является наличие такой технологии, как web workers, которая позволяет в некоторой степени обеспечить, если не мультипоточность, то ее подобие при выполнении скриптов.&lt;/p&gt;
						&lt;p&gt;Суть технологии проста — в отдельные файлы выносятся функции, обеспечивающие функционирование AJAX, либо функции обрабатывающие большие массивы информации, которые во время работы уменьшают скорость построения страницы. Таких файлов может быть столько сколько нужно. При выполнении скрипта на стороне браузера создается специальный объект Worker, который и отвечает за вызов необходимых функций. Многие современные браузеры поддерживают данную технологию.&lt;/p&gt;
						&lt;p&gt;Теперь о том, как использовать работников.&lt;br /&gt;Проверим поддержку объекта браузером:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;if (!!window.Worker)
{
//технология поддерживается
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Создается объект очень просто:&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;var worker = new Worker(имя файла с исполняемой функцией);&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;созданный нами объект обладает следующими методами:&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;postMessage();&lt;/strong&gt; //ключевой метод, инициализирующий обмен данными&lt;br /&gt;&lt;strong&gt;onmessage();&lt;/strong&gt; //метод, исполняемый при поступлении ответа от вызванного работника.&lt;br /&gt;&lt;strong&gt;onerror();&lt;/strong&gt; //метод, вызываемый при возникновении ошибок&lt;/p&gt;
						&lt;p&gt;Теперь сделаем сам файлик worker`а и назовем его worker.js. Внутрь поместим следующий код:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;onmessage = function(ev)
{
var answ = ev.data;
};&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Объект и файл у нас есть, теперь остается только его вызвать делается это так:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 6em&quot;&gt;&lt;pre&gt;var worker = new Worker(&#039;worker.js&#039;);
worker.postMessage(&#039;Hello World&#039;);&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Переменная ev будет содержать объект, в свойстве data, которого будет находится то, что мы передадим в функцию, в нашем случае строка &#039;Hello World&#039;. Передавать можно что угодно, в том числе сложные объекты. Теперь сделаем, чтобы наш работник, что-нибудь нам вернул. Для этого в код работника последней строкой допишем следующее:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 4.5em&quot;&gt;&lt;pre&gt;postMessage(answ);&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;А в основном скрипте определим метод, который будет вызван при поступлении сообщения от работника:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;worker.onmessage = function (event)
{
alert(event.data);
};&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Ещё надо добавить, что HTML5 позволяет создать Web Worker и без внешнего файла с помощью &lt;/p&gt;
						&lt;p&gt;blobBuilder&#039;а:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 16.5em&quot;&gt;&lt;pre&gt;var worker = new Worker(
    window.URL.createObjectURL(
        new BlobBuilder().append(
            &amp;quot;onmessage = function(e) { postMessage(&#039;hello habrahabr&#039;); }&amp;quot;
        ).getBlob()
    )
);

worker.postMessage();&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Вот собственно и все! Вернуть работник нам также сможет любые данные. Стоит помнить о нескольких важных моментах, таких как:&lt;br /&gt;1. Работник не может получить доступ к DOM ни в каком виде. Ни одна функция работающая с DOM получающая данные о его состоянии или модифицирующая его, внутри работника недоступна. В том числе alert().&lt;br /&gt;2. Работник имеет доступ к:&lt;br /&gt;2.1 navigator&lt;br /&gt;2.2 объект location (только чтение)&lt;br /&gt;2.3 метод importScripts() (для доступа к файлам сценариев в том же домене)&lt;br /&gt;2.4 объекты JavaScript, такие как Object, Array, Date, Math, String&lt;br /&gt;2.5 XMLHttpRequest&lt;br /&gt;2.6 методы setTimeout() и setInterval()&lt;/p&gt;
						&lt;p&gt;Так в чем же собственно мультипоточность? А в том, что объектов работников может быть сколько угодно и все они могут работать одновременно, при этом формирование страницы не будет остановлено, в ожидании пока отработает, какая-либо функция.&lt;/p&gt;
						&lt;p&gt;А теперь о важном, о том, чего нет ни в одной статье про работников: для того чтобы получить адекватный ответ при использовании технологии AJAX, необходимо отсылать СИНХРОННЫЕ запросы методом POST. Причина проста: при асинхронном запросе воркер заканчивает работу не дожидаясь ответа сервера. Логического объяснения почему не шлется методом GET я так и не нашел. Беспокоиться о том, что все встанет, не стоит, так как работник выполняется в отдельном потоке, основной скрипт будет работать дальше без остановок. &lt;/p&gt;
						&lt;p&gt;При использовании технологии воркеров для выполнения простых действий выигрыш в скорости будет минимален. Однако при сложных вычислениях можно существенно ускорить работу системы.&lt;/p&gt;
						&lt;p&gt;Приведу свою реализацию данного подхода:&lt;br /&gt;1.&lt;br /&gt;объект отвечающий за связь с сервером:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 35em&quot;&gt;&lt;pre&gt;function  AJAXprov()
{
  var xmlhttp;
  var answServ;
  
  this.provXmlHttp = function()
  {
      var xmlhttp;
    try 
    {
          xmlhttp = new ActiveXObject(&#039;Msxml2.XMLHTTP&#039;);
      } 
    catch (e) 
    {
          try 
      {
        xmlhttp = new ActiveXObject(&#039;Microsoft.XMLHTTP&#039;);
      } 
      catch (E) 
      {
            xmlhttp = false;
          }
      }
      if (!xmlhttp &amp;amp;&amp;amp; typeof XMLHttpRequest!=&#039;undefined&#039;) 
    {
          xmlhttp = new XMLHttpRequest();
      }
    return xmlhttp;
  }

//первый - режим работы false/true (синх/асинх), 
//второй - тип запроса (POST/GET)
//третий - параметры для запроса (адрес, по которому нужно отправить запрос, 
//четвертый - необязательный аргумент, содержащий параметры для POST запроса
  this.sendAnsServ = function (modeWork, typeSend, adr, param, id, cb)
  {
    if(typeSend == &#039;G&#039;)
    {
      adr = adr + &#039;?&#039; + param;
      //alert(adr);
      httpP.open(&#039;GET&#039;, adr, modeWork);
  	 	httpP.setRequestHeader(&#039;Cache-Control&#039;, &#039;no-cache, must-revalidate&#039;);
      httpP.onreadystatechange = function()
      {
        if (httpP.readyState == 4) 
        {
          if(httpP.status == 200) 
          {
            if(cb)
            {
              return httpP.responseText;
            }
          }
        }
      }
      httpP.send(null);
    }
    if(typeSend == &#039;P&#039;)
    {
      httpP.open(&#039;POST&#039;, adr, modeWork);
      httpP.setRequestHeader(&#039;Content-Type&#039;, &#039;application/x-www-form-urlencoded&#039;);
    	httpP.setRequestHeader(&#039;Cache-Control&#039;, &#039;post-check=0,pre-check=0, false&#039;);
    	httpP.setRequestHeader(&#039;Cache-Control&#039;,  &#039;max-age=0, false&#039;);
    	httpP.setRequestHeader(&#039;Pragma&#039;, &#039;no-cache&#039;);
    	httpP.setRequestHeader(&#039;Cache-Control&#039;, &#039;no-cache, must-revalidate&#039;);
    	httpP.send(param);
      if(httpP.status == 200)
      {
        if(cb)
        {
          return httpP.responseText;
        }
      }
    }
  }
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;2. Воркер&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 35em&quot;&gt;&lt;pre&gt;onmessage = function (obj)
{
  importScripts(&amp;quot;/JS/classes/AjaxClass.js &amp;quot;);
  var ajObj = new AJAXprov();
  httpP = ajObj.provXmlHttp();
  obj = obj.data;
  answ = ajObj.sendAnsServ(objEx.mode, objEx.type, objEx.adress, objEx.parametrs, objEx.ID);

  postMessage(answ);
}

вызов:

function crWorkerAjax(param, id, cb)
{

  var workerAjax = new Worker(&amp;quot;/JS/workers/ajaxWorker.js&amp;quot;);
  var objEx = 
    {
      mode:false,
      type:&#039;P&#039;,
      adress:&#039;/router.php&#039;,
      parametrs:param,
      ID:id,
    };


  workerAjax.onmessage = function (obj)
  {
    var res = eval(obj[&#039;data&#039;]);
    cb.call(this, res, id);
  }
  workerAjax.onerror = function(err)
  {
    alert(err.message);
  }
  workerAjax.postMessage(objEx);
  
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Альтернативный вариант работающий в браузерах на webkit&lt;/p&gt;
						&lt;p&gt;Для основного файла:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 13.5em&quot;&gt;&lt;pre&gt;  if (!!window.Worker){
    var worker = new Worker(&#039;worker.js&#039;);
    worker.postMessage(&#039;Hellow World&#039;);
    worker.onmessage = function (e){
      alert(e.data);
    };
  }&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Для worker:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 18em&quot;&gt;&lt;pre&gt;onmessage = function(e){
  transport = new XMLHttpRequest();
  transport.open(&#039;GET&#039;, &#039;data.txt&#039;, true);
  transport.onreadystatechange = function(){
    if(transport.readyState == 4){
      postMessage(transport.response);
    } 
  };
  transport.send();
};&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Ну а в data.txt пихаем просто текст на тест, я пихал «testing123»&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:53:23 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=7#p7</guid>
		</item>
		<item>
			<title>HTML5 Canvas Map — реализация картографического движка</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=6#p6</link>
			<description>&lt;p&gt;В рамках большого интерактивного веб-ориентированного проекта (подробнее о котором возможно в другом посте) я занимаюсь разработкой картографического движка, реализованного на HTML5 CANVAS. Его разработка дошла до стадии беты и, с одобрения моего руководства, появилось желание продемонстрировать данные карты широкой публике.&lt;/p&gt;
						&lt;p&gt;&lt;a href=&quot;http://uploads.ru/?v=ZTGWr.png&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;postimg&quot; loading=&quot;lazy&quot; src=&quot;http://uploads.ru/t/Z/T/G/ZTGWr.png&quot; alt=&quot;http://uploads.ru/t/Z/T/G/ZTGWr.png&quot; /&gt;&lt;/a&gt;&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Общие сведения&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Движок разрабатывался без использования каких-либо специализированных библиотек или фреймворков. Единственная используемая библиотека – jQuery.&lt;/p&gt;
						&lt;p&gt;Изображения карт – тайлы – сгенерированы с помощью нашей утилиты. Тут еще есть к чему стремиться, так как их оптимизацией мы еще не занимались.&lt;/p&gt;
						&lt;p&gt;Все отрисовывается на CANVAS’e, за исключением таких элементов как панель дополнительных инструментов и popup’ов меток (хотя в демо по ссылке ниже их все равно нет).&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Реализация&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Реализация модульная и состоит из следующих основных частей, назначение которых думаю понятно из их названий: CanvasDragger, CanvasEventer, CanvasImgLoader, CanvasMapper, CanvasMarker, CanvasMiniMapper, CanvasResizer, CanvasTools, CanvasZoomer.&lt;/p&gt;
						&lt;p&gt;Для того чтобы подключить карты достаточно в нужном месте html’a написать следующую строчку:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 4.5em&quot;&gt;&lt;pre&gt;&amp;lt;canvas id=&amp;quot;map2d&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Далее в коде JS производим инициализацию (как пример):&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 35em&quot;&gt;&lt;pre&gt;$(function() {
    mWrap = new MapsWrapper({
        mapDivId: &amp;quot;map2d&amp;quot; // тут указываем ID canvas’a, в котором будет рисоваться карта
    });
});

MapsWrapper = function(properties) {
    this.initialize(properties);
};
$.extend(MapsWrapper.prototype, {
    v2DMapDiv                : null,
    v2DMapComponent   : null,

    initialize: function(prop){
        this.v2DMapDiv = prop.mapDivId;
        this.initMap();
    },

    initMap: function(){
        var GlobalParams = {
            staticMapUrl: [&amp;quot;http://gate.looxity.ru:8088/map.html&amp;quot;, &amp;quot;http://zain.looxity.ru:8088/map.html&amp;quot;, &amp;quot;http://kaph.looxity.ru:8088/map.html&amp;quot;],
            initCrd     : {x: 7445, y: 9925},
            initZoom    : 0.25,
            zoomList    : [1, 0.5, 0.25, 0.1, 0.05, 0.025],
            miniMap     : true,
            tools       : {scaler: true, polygoner: true}
        };
        this.v2DMapComponent = new CanvasMapper (this.v2DMapDiv);
        this.v2DMapComponent.initialize(GlobalParams);
    }
});&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Остановимся поподробнее на параметрах:&lt;br /&gt;staticMapUrl – хосты, с которых подгружаются тайлы карты&lt;br /&gt;initCrd – начальные координаты в проекции Гаусса-Крюгера, в данном случае примерно соответствуют нулевому километру автодорог, что рядом с Манежной площадью.&lt;br /&gt;miniMap – подключение модуля миникарты&lt;br /&gt;tools – подключение модуля дополнительных инструментов&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Внутренняя механика&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Или что скрывается за тем или иным действием пользователя. Пройдемся по основным событиям.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Стартуем&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;При инициализации карт рассчитывается количество тайлов, которое нужно показать, чтобы полностью покрыть canvas. Зная размеры canvas’a, при заданном размере тайлов в 256х256, проделываем данную операцию.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Двигаемся&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Далее когда происходит движение карты – dragg – проверяем ситуацию если мы передвинули карту на такое расстояние, что нужно подгрузить новый тайл. Так же проверяем все ли тайлы находятся в области видимости, если нет, то запускается «сборщик мусора»:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 21em&quot;&gt;&lt;pre&gt;unVisibleTilesCollector: function() {
        for(var cnt = 0; cnt &amp;lt; this.__TILES__.length; cnt++) {
            if( (this.__TILES__[cnt].canvX + this.tileSize) &amp;lt; 0
                || this.__TILES__[cnt].canvX &amp;gt; this.canvas.width
                || this.__TILES__[cnt].canvY &amp;gt; this.canvas.height
                || (this.__TILES__[cnt].canvY + this.tileSize) &amp;lt; 0
                ) {
                this.__TILES__.splice(cnt, 1);
                cnt--;
            }
        }
    }&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Масштабируем (zoomIn, zoomOut)&lt;/p&gt;
						&lt;p&gt;При срабатывании события “mousewheel” последовательно происходят следующие основные действия:&lt;br /&gt;копируется текущее положение всех тайлов&lt;br /&gt;&lt;strong&gt;$.extend(this.__ANIM_TILES__, this.mapper.__TILES__)&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;средствами canvas’a и с помощью математики происходит уменьшение или увеличение тайлов (в зависимости от того как мы крутим колесико мыши) из копии, сделанной в пп1&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 21em&quot;&gt;&lt;pre&gt;for(cnt; cnt &amp;lt; this.animSteps; cnt++){
                setTimeout(function(){
                    _this.ctx.clearRect(0,0,_this.canvas.width,_this.canvas.height);
                   _this.ctxMarker.clearRect(0,0,_this.canvas.width,_this.canvas.height);
                    animScale += scale*stepScale;
                    _this.drawAllAnimTiles(evt, {
                        animScale: animScale,
                        stepCurrNum: Math.round(Math.abs(animScaleStart-animScale)/stepScale),
                        stepScale: stepScale
                    });
                 }, delay*cnt);
            }&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;сверху, по мере подгрузки, накладываются новые тайлы, в соответствии с новым масштабом&lt;br /&gt;MapsWrapper.v2DMapComponent.update()&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Работа в браузерах&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Работа проверялась в FireFox, Chrome, Safari, Opera и IE последних версий.&lt;br /&gt;Для тех кто все еще не в курсе лишний раз подчеркну следующее. Так как используется canvas, автоматически отпадают все браузеры, не поддерживающие данную технологию, а это — IE версии 8 и ниже и совсем уж старые версии вышеперечисленных браузеров.&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:44:42 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=6#p6</guid>
		</item>
		<item>
			<title>HTML5 Drag and Drop загрузка файлов</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=5#p5</link>
			<description>&lt;p&gt;Благодаря нововведениям HTML5 создавать Drag and Drop интерфейсы стало гораздо проще. К сожалению, эти нововведения еще не обладают обширной поддержкой браузеров, но надеюсь в скором времени это изменится (на данный момент работает в Firefox 4+, Chrome и Opera 11.10).&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Разметка&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Сразу говорю, статья написана больше для новичков, чем для профессионалов. Поэтому некоторые моменты будут описываться очень подробно.&lt;/p&gt;
						&lt;p&gt;Для начала, нам необходимо создать HTML файл с таким содержанием:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 31.5em&quot;&gt;&lt;pre&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;
    
  &amp;lt;title&amp;gt;HTML5 Drag and Drop загрузка файлов&amp;lt;/title&amp;gt;  
  &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;/style.css&amp;quot;&amp;gt;
    
  &amp;lt;script src=&amp;quot;//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script src=&amp;quot;/script.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;    
    &amp;lt;form action=&amp;quot;/upload.php&amp;quot;&amp;gt;
      &amp;lt;div id=&amp;quot;dropZone&amp;quot;&amp;gt;
        Для загрузки, перетащите файл сюда.
      &amp;lt;/div&amp;gt;
    &amp;lt;/form&amp;gt;  
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Вся работа у нас будет происходить с контейнером dropZone. Теперь добавим стили для нашего документа (style.css):&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 35em&quot;&gt;&lt;pre&gt;body {
    font: 12px Arial, sans-serif;
}

#dropZone {    
    color: #555;
    font-size: 18px;
    text-align: center;    
    
    width: 400px;
    padding: 50px 0;
    margin: 50px auto;
    
    background: #eee;
    border: 1px solid #ccc;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#dropZone.hover {
    background: #ddd;
    border-color: #aaa;
}

#dropZone.error {
    background: #faa;
    border-color: #f00;
}

#dropZone.drop {
    background: #afa;
    border-color: #0f0;
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;В стилях Вы можете заметить три состояния у элемента dropZone: при наведении, если возникает какая-то ошибка и при успешном выполнении.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Скрипт загрузки&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Теперь мы приступим к самому интересному — написанию JavaScript кода. Для начала, нам необходимо создать переменные, в одну из которых мы поместим нашу dropZone, а во второй укажем максимальный размер файла.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;$(document).ready(function() {
    var dropZone = $(&#039;#dropZone&#039;),
        maxFileSize = 1000000; // максимальный размер файла - 1 мб.
})&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Дальше мы должны проверить поддерживает ли браузер Drag and Drop, для этого мы будем использовать FileReader функцию. Если браузер не поддерживает Drag and Drop, то внутри элемента dropZone мы напишем «Не поддерживается браузером!» и добавим класс «error».&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;if (typeof(window.FileReader) == &#039;undefined&#039;) {
    dropZone.text(&#039;Не поддерживается браузером!&#039;);
    dropZone.addClass(&#039;error&#039;);
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Следующее что мы сделаем это будет анимация эффекта перетаскивания файла на dropZone. Отслеживать эти действия мы будет с помощью событий «ondragover» и «ondragleave». Но, так как эти события не могут быть отслежены у jQuery объекта, нам необходимо обращаться не просто к «dropZone», а к «dropZone[0]».&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 16.5em&quot;&gt;&lt;pre&gt;dropZone[0].ondragover = function() {
    dropZone.addClass(&#039;hover&#039;);
    return false;
};
    
dropZone[0].ondragleave = function() {
    dropZone.removeClass(&#039;hover&#039;);
    return false;
};&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Теперь нам необходимо написать обработчик события «ondrop» — это событие когда перетянутый файл опустили. В некоторых браузерах при перетягивании файлов в окно браузера они автоматически открываются, что бы такого не произошло нам нужно отменить стандартное поведение браузера. Также нам необходимо убрать класс «hover», и добавить класс «drop».&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 10.5em&quot;&gt;&lt;pre&gt;dropZone[0].ondrop = function(event) {
    event.preventDefault();
    dropZone.removeClass(&#039;hover&#039;);
    dropZone.addClass(&#039;drop&#039;);
};&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Дальше нам нужно добавить проверку на размер файла, для этого добавим в обработчик «ondrop» следующий строчки кода:&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 13.5em&quot;&gt;&lt;pre&gt;var file = event.dataTransfer.files[0];
        
if (file.size &amp;gt; maxFileSize) {
    dropZone.text(&#039;Файл слишком большой!&#039;);
    dropZone.addClass(&#039;error&#039;);
    return false;
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Теперь нам необходимо написать AJAX запрос отсылающий наш файл в обработчик. Для создания AJAX запроса мы будем использовать объект XMLHttpRequest. Добавим для объекта XMLHttpRequest два обработчика событий: один будет показывать прогресс загрузки файла, а второй результат загрузки. В качестве обработчика укажем файл upload.php.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 12em&quot;&gt;&lt;pre&gt;var xhr = new XMLHttpRequest();
xhr.upload.addEventListener(&#039;progress&#039;, uploadProgress, false);
xhr.onreadystatechange = stateChange;
xhr.open(&#039;POST&#039;, &#039;/upload.php&#039;);
xhr.setRequestHeader(&#039;X-FILE-NAME&#039;, file.name);
xhr.send(file);&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Теперь займемся функциями прогресса загрузки и результата загрузки. В функции «uploadProgress» нет ничего сложного, лишь простейшая математика.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 9em&quot;&gt;&lt;pre&gt;function uploadProgress(event) {
    var percent = parseInt(event.loaded / event.total * 100);
    dropZone.text(&#039;Загрузка: &#039; + percent + &#039;%&#039;);
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;В функции «stateChange» мы должны проверить завершен ли процесс загрузки, и если да, то необходимо проверить не возникла ли какая-либо ошибка. Код успешного запроса «200», если же код отличается от этого, то это означает, что произошла ошибка.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 18em&quot;&gt;&lt;pre&gt;function stateChange(event) {
    if (event.target.readyState == 4) {
        if (event.target.status == 200) {
            dropZone.text(&#039;Загрузка успешно завершена!&#039;);
        } else {
            dropZone.text(&#039;Произошла ошибка!&#039;);
            dropZone.addClass(&#039;error&#039;);
        }
    }
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Написание JavaScript части завершено.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Серверная часть&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Все что нам осталось, это написать простейший обработчик, который будет сохранять файл в нужном нам месте. В написании обработчика я не буду сильно углубляться, а лишь приведу небольшой пример на PHP.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 15em&quot;&gt;&lt;pre&gt;&amp;lt;?php

$uploaddir = getcwd().DIRECTORY_SEPARATOR.&#039;upload&#039;.DIRECTORY_SEPARATOR;
$uploadfile = $uploaddir.basename($_FILES[&#039;file&#039;][&#039;name&#039;]);

move_uploaded_file($_FILES[&#039;file&#039;][&#039;tmp_name&#039;], $uploadfile);

?&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;На этом всё, надеюсь статья была полезной для Вас.&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:30:09 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=5#p5</guid>
		</item>
		<item>
			<title>HTML 5: рисуем в Canvas</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=4#p4</link>
			<description>&lt;p&gt;В HTML 5 появилось много интересных и нужных возможностей, которых нехватало и они были реализованы например flash’ем… Собственно статья о возможности рисовать в canvas&lt;/p&gt;
						&lt;p&gt;Элемент &amp;lt;canvas&amp;gt; похож на элемент &amp;lt;img&amp;gt;, различие в том что у него нет атрибутов src и alt.&amp;#160; У &amp;lt;canvas&amp;gt;&amp;#160; есть&amp;#160; только 2 атрибута – ширина и высота. Если эти атрибуты отсутсвуют, то ширина по умолчанию будет равна 300 пикселей, а высота 150 пикселей.&lt;/p&gt;
						&lt;p&gt;Canvas может иметь такие же атрибуты стиля как и у &amp;lt;img&amp;gt; (margin, border, background и т.д.).&amp;#160; Если стиль не задан, то первоначально он полностью прозрачный.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 4.5em&quot;&gt;&lt;pre&gt;&amp;lt;canvas width=&amp;quot;300&amp;quot; height=&amp;quot;300&amp;quot;&amp;gt;&amp;lt;canvas&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Rendering Context&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt;&amp;lt;canvas&amp;gt; создает отрисовочную поверхность фиксированного размера, которая предоставляет один или несколько контекстов. Контексты (context) используются для создания и манипулирования отрисованым содержимым. Мы будем рассматиривать 2-ух мерный контекст.&lt;/p&gt;
						&lt;p&gt;Стоит отметить, что canvas представляет из себя декартову поверхность начало координат (0,0) которой находится в левом верхнем углу, с координатами осью X увеличивающуюся вправо и Y увеличивающуюся вниз.&lt;/p&gt;
						&lt;p&gt;Canvas первоначально чист и для того чтобы начать в нем рисовать нам нужно получить context. У элемента canvas есть DOM метод getContext, который используется чтобы получить rendering context и отрисовычные&amp;#160; функции.&amp;#160; У getContext() есть один параметр – тип context (в нашем случае ‘2D’).&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 30em&quot;&gt;&lt;pre&gt;var canvas = document.getElementById(&#039;canvas&#039;);
 
var rc = canvas.getContext(&#039;2d&#039;);
Проверяем поддерживает ли браузер canvas.

var canvas = document.getElementById(&#039;canvas&#039;);
 
if (canvas.getContext){
 
var rc = canvas.getContext(&#039;2d&#039;);
 
// код для отрисовки
 
} else {
 
// сообщение о том что браузер не поддерживает canvas
 
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Прямоугольник&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Первое, что мы рассмотрим это прямоугольник. Существует 3 функции для его отрисовки на canvas.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 27em&quot;&gt;&lt;pre&gt;fillRect(x,y,width,height) :  рисует закрашенный прямоугольник
strokeRect(x,y,width,height) : рисует незакрашеный прямоугольник (линии)
clearRect(x,y,width,height) : очищает пространство попадающее под площадь данного прямоугольника.
Функции имеют одинаковые параметры: X, Y – координаты верхнего левого угла, width,height – ширина и высота прямоугольника.
Посмотреть пример в действии

function draw(){  
  var canvas = document.getElementById(&#039;tutorial&#039;);  
  if (canvas.getContext){  
    var ctx = canvas.getContext(&#039;2d&#039;);  
 
    ctx.fillRect(25,25,100,100);  
    ctx.clearRect(45,45,60,60);  
    ctx.strokeRect(50,50,50,50);  
  }  
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Результатом работы скрипта станет такая картинка. Функция fillRect нарисует закрашенный прямоугольник размером 100&amp;#215;100 пикселей, далее функция clearRect очистит прямоугольник размером 80&amp;#215;80 пикселей внутри закрашенного прямоугольника, ну и функцией strokeRect нарисуем незакрашеный прямоугольник.&lt;/p&gt;
						&lt;p&gt;&lt;strong&gt;&lt;span style=&quot;font-style: italic&quot;&gt;Рисуем линии&lt;/span&gt;&lt;/strong&gt;&lt;/p&gt;
						&lt;p&gt;Для рисования линий нам понадобятся ф-ии&lt;/p&gt;
						&lt;p&gt;beginPath()&lt;br /&gt;closePath()&lt;br /&gt;stroke()&lt;br /&gt;fill()&lt;br /&gt;moveTo(x, y)&lt;br /&gt;lineTo(x, y)&lt;br /&gt;arc(x, y, radius, startAngle, endAngle, anticlockwise)&lt;/p&gt;
						&lt;p&gt;Для рисования линии первой должна быть вызвана функия beginPath. Далее мы будем вызывать функции создающие линии из которых будет составлен конечный рисунок. Далее мы должны отрисовать наши линии вызвав stroke(), если же мы хотим получить закрашенный рисунок, то есть функция fill().&lt;br /&gt;Метод closePath завершает дело начатое beginPath т.е. прерывает линию, но не отображает. Вызвав заполняющие функции (stroke или fill) мы закроем открытые формы и нам не нужно вызывать beginPath.&lt;br /&gt;Функцией moveTo мы устанавливает точку от которой начнется линия.&lt;br /&gt;Функцией lineTo устанавливаем точку к которой нужно провести линию.&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 21em&quot;&gt;&lt;pre&gt;&amp;lt;canvas id=&amp;quot;canvas&amp;quot; widht=&amp;quot;800&amp;quot; height=&amp;quot;500&amp;quot;&amp;gt;&amp;lt;/canvas&amp;gt;
&amp;lt;script&amp;gt;
var rc=document.getElementById(&amp;quot;canvas&amp;quot;).getContext(&#039;2d&#039;);
rc.beginPath();
rc.font = &#039;italic 100 10px/2 Unknown Font, sans-serif&#039;;
rc.moveTo(100, 100);
rc.lineTo(200, 100);
rc.lineTo(200, 200);
rc.lineTo(100, 200);
rc.lineTo(100, 100);
rc.stroke();
&amp;lt;/script&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;Функция arc рисует дугу. x, y – координаты центра, radius – радиус, startAngle – угол начала, endAngle – угол конца дуги.&lt;/p&gt;
						&lt;p&gt;arc(x, y, radius, startAngle, endAngle)&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 12em&quot;&gt;&lt;pre&gt;&amp;lt;script&amp;gt;
var rc=document.getElementById(&amp;quot;canvas&amp;quot;).getContext(&#039;2d&#039;);
rc.beginPath();
rc.arc(100, 100, 50, 0, 2*Math.PI, true);
rc.stroke();
&amp;lt;/script&amp;gt;&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:23:44 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=4#p4</guid>
		</item>
		<item>
			<title>Работаем с HTML5 local storage. Основы</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=3#p3</link>
			<description>&lt;p&gt;HTML5 все быстрее получает широкое распространение среди разработчиков. Большинство разработчиков знакомо с такими тегами HTML5 как header, section, footerи video. Но в HTML5гораздо больше возможностей. Сегодня мы поговорим о HTML5 local storage или просто локальном хранилище.&lt;br /&gt;Локальное хранилище — это база данных, которая находится на стороне и клиента и в которой хранятся пары ключ — значение. Данные этой базы данных хранятся на вашем компьютере в браузере. У каждого баузера на компьютере свое локальное хранилище. Не все браузеры на поддерживают локальное хранилище. Вот список браузеров которые поддерживающих его&lt;/p&gt;
						&lt;p&gt;&lt;span style=&quot;display: block; text-align: center&quot;&gt;&lt;a href=&quot;http://uploads.ru/?v=q0Jib.png&quot; rel=&quot;nofollow&quot; target=&quot;_blank&quot;&gt;&lt;img class=&quot;postimg&quot; loading=&quot;lazy&quot; src=&quot;http://uploads.ru/t/q/0/J/q0Jib.png&quot; alt=&quot;http://uploads.ru/t/q/0/J/q0Jib.png&quot; /&gt;&lt;/a&gt;&lt;/span&gt;&lt;/p&gt;
						&lt;p&gt;Вот простой пример, как работать с локальным хранилищем через Javascript&lt;/p&gt;&lt;div class=&quot;code-box&quot;&gt;&lt;strong class=&quot;legend&quot;&gt;Код:&lt;/strong&gt;&lt;div class=&quot;blockcode&quot;&gt;&lt;div class=&quot;scrollbox&quot; style=&quot;height: 25.5em&quot;&gt;&lt;pre&gt;if(typeof(localStorage) == ‘undefined’ ) {
 alert(&#039;Ваш браузер не поддерживает localStorage()&#039;);
 }
 else {
 try {
 localStorage.setItem(&#039;name&#039;, &#039;Hello World!&#039;); //сохраняет строку &amp;quot;Hello World&amp;quot; по ключу name
 }
 catch (e) {
 if (e == QUOTA_EXCEEDED_ERR) {
 alert(&#039;Кончилось место&#039;); //данные не сохранены, так как кончилось доступное место
 }
 }
alert(localStorage.getItem(&#039;name&#039;)); //Hello World!
localStorage.removeItem(&#039;name&#039;); //удаляет значение по ключу name
}&lt;/pre&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;p&gt;В коде, приведенном выше, вы проверяем, поддерживает ли браузер local storge, сохраняем данные в хранилище, затем получаем их же и показываем пользователю и удаляем данные из хранилища. Это типичный пример Hello World, показывающий насколько просто работать с local storage.&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:17:06 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=3#p3</guid>
		</item>
		<item>
			<title>Краткое описание HTML5</title>
			<link>http://html5.mybb.ru/viewtopic.php?pid=2#p2</link>
			<description>&lt;p&gt;&lt;strong&gt;HTML5&lt;/strong&gt; (англ. &lt;span style=&quot;font-style: italic&quot;&gt;HyperText Markup Language, version 5&lt;/span&gt;) — язык для структурирования и представления содержимого для всемирной паутины, а также основная технология, используемая в Интернете. Это пятая версия HTML-стандарта (изначально созданного в 1990 году и последней версией которого являлся HTML4, стандартизированный в 1997 году[1]) и находится в стадии разработки по состоянию на ноябрь 2011 года. Основной её целью является улучшить язык, поддерживающий работу с новейшими мультимедийными приложениями, при этом сохраняется лёгкость чтения кода для человека и ясность исполнения для компьютеров и приспособлений (веб-браузеры, синтаксические анализаторы и т.д.). HTML5 включает в себя не только HTML 4, но и XHTML 1, а также DOM2HTML (особенно JavaScript).&lt;/p&gt;
						&lt;p&gt;Следуя своим непосредственным предшественникам HTML 4.01 и XHTML 1.1, HTML5 отвечает всем требованиям, для которых HTML и XHTML в основном используются во всемирной паутине. HTML5 также считается микстурой будущего с введёнными различными спецификациями, вместе с тем введёнными продуктами программного обеспечения, такими как веб-браузеры, установленными для использования в общей практике, а также исправления множества синтаксических ошибок, возникающих в существующих веб-документах. HTML5 — также попытка определить единый язык разметки, который мог бы быть написан как в HTML, так и в XHTML и был бы синтаксически корректен. Он включает в себя детальные модели обработки, чтобы поддерживать больше взаимодействующих процессов; он расширяет, улучшает и рационализирует разметку, пригодную для документов, и вводит разметку и API для сложных веб-приложений.&lt;/p&gt;
						&lt;p&gt;В HTML5 появляется множество синтаксических особенностей. Например, элементы &amp;lt;video&amp;gt;, &amp;lt;audio&amp;gt;, &amp;lt;header&amp;gt; и &amp;lt;canvas&amp;gt; такие же как и в SVG. Эти новшества разработаны для упрощения внедрения и управления графическими и мультимедийными объектами в сети без необходимости обращения к собственным плагинам и API. Другие новые элементы, такие как &amp;lt;section&amp;gt;, &amp;lt;article&amp;gt;, &amp;lt;header&amp;gt; и &amp;lt;nav&amp;gt; разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например, &amp;lt;a&amp;gt; &amp;lt;menu&amp;gt; и &amp;lt;cite&amp;gt; были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5.[2] HTML5 также определяет некоторые детали для обработки недопустимых документов, поэтому синтаксические ошибки будут рассматриваться одинаково всеми приспособленными браузерами и другими пользовательскими агентами.&lt;/p&gt;</description>
			<author>mybb@mybb.ru (admin)</author>
			<pubDate>Thu, 22 Dec 2011 01:09:17 +0400</pubDate>
			<guid>http://html5.mybb.ru/viewtopic.php?pid=2#p2</guid>
		</item>
	</channel>
</rss>
