Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Лекция 2:

Новые возможности HTML 5

Аннотация: В лекции будут рассмотрены такие новинки языка гипертекстовой разметки, как: элемент Canvas (2D и 3D), спецификация Geolocation API, MathML, Scalable Vector Graphics (SVG).

Презентацию к данной лекции можете скачать здесь.

Canvas 2D

В HTML5 появился элемент управления <Canvas>, предназначенный для рисования графики. Этот элемент управления является контейнером, внутри которого пользователь может рисовать геометрические фигуры, отображать текст или размещать изображения.

Рассмотрим способ отображения текста в контейнере пример (sample_1)

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Стихотворение МажитаГафури</title>
</head>
<body>
<canvas id="myCanvas"width="800"height="600"/>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var myContext = canvas.getContext('2d');
//Добавляемтекст
myContext.font = "24px Comic Sans Ms";
myContext.fillText("Чтоб истину познать - проникни в суть.", 10, 30);
myContext.fillText("Поймешь все тайны, лишь упорным будь", 10, 60);
myContext.fillText("Не сразу говори 'Мне все понятно',", 10, 90);
myContext.fillText("Вглубь всех вещей старайся заглянуть", 10, 120);
</script>
</body>
</html>
    

Из листинга видно, что вначале мы добавляем к веб-странице элемент управления Canvas, затем в коде JavaScript создаем контекст, в который далее записываем текст.

В следующем примере (sample_2) мы покажем как можно изобразить молекулу бензола, используя возможности элемента управления Canvas.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Молекула бензола</title>
<script>
window.onload = function () {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function my Line(initialX, initialY, finalX, finalY) {
this.initialX = initialX;
this.initialY = initialY;
this.finalX = finalX;
this.finalY = finalY;
            }

var n = 6;
var i;

benzol = new Array(n);
benzol[0] = newmyLine(100, 0, 200, 0);
benzol[1] = newmyLine(200, 0, 250, 86.6);
benzol[2] = newmyLine(250, 86.6, 200, 173.2);
benzol[3] = newmyLine(200, 173.2, 100, 173.2);
benzol[4] = newmyLine(100, 173.2, 50, 86.6);
benzol[5] = newmyLine(50, 86.6, 100, 0);

for (i = 0; i< n; i++) {
context.moveTo(parseFloat(benzol[i].initialX), parseFloat(benzol[i].initialY));
context.lineTo(parseFloat(benzol[i].finalX), parseFloat(benzol[i].finalY));
context.stroke();
            }
        }
</script>
</head>
<body>
<canvasid="myCanvas"width="300"height="300"></canvas>
</body>
</html>
    

Canvas 3D

Еще более зрелищных результатов можно добиться, используя возможности элемента управления Canvas в области отображения трехмерной графики. Здесь хотелось бы обратиться к сайту MicrosoftInternetExplorer 10 TestDrive (http://ie.microsoft.com/testdrive/), в котором собрано множество очень интересных примеров, подчеркивающих возможности MSIE10. В одном из таких примеров демонстрируется вращающаяся сфера, образованная частицами (sample_3).


Спецификация GeolocationAPI

(http://www.w3.org/TR/2009/WD-geolocation-API-20090707/)

Этот раздел определяет API, предоставляющий доступ к информации о географическом местоположении, устройства (широта и долгота). Источником информации о местоположении объекта могут быть система глобального позиционирования (GPS), сигналы, полученные из компьютерных сетей, такие как ip-адреса, идентификаторы устройств RFID, GSM/CDMA,WiFi,Bluetooth, MAC-адреса, координаты введенные пользователем вручную. При этом нет гарантии, что GeolocationAPI даст истинные координаты устройства. Информация о местоположении объекта может быть представлена в виде "моментального снимка" или в виде последовательности данных, обновляемых с определенной периодичностью. В ряде случаев информация о местоположении объекта помещается в кэш браузера.

При определении координат неподвижного объекта (моментальный снимок) используется примерно такой код (http://dev.w3.org/geo/api/spec-source.html):

functionshowMap(position) 
{
//Показатькарту, отцентрированнуюпо широте и долготе объекта-
//position.coords.latitude, position.coords.longitude).
}

// Запросмоментальногоснимка
navigator.geolocation.getCurrentPosition(showMap);
    

Если объект находится в движении, то для отслеживания его перемещений может использоваться примерно такой код:

functionscrollMap(position)
{
//Прокручиваемкартутакимобразом, чтобывеецентребылобъект//(position.coords.latitude, position.coords.longitude).
}

//Запрашиваем повторяющиеся обновления
varwatchId = navigator.geolocation.watchPosition(scrollMap);

functionbuttonClickHandler() 
{
//Отменяем обновление, если пользователь нажмет на кнопку
navigator.geolocation.clearWatch(watchId);
}
    

Результаты определения координат объекта отображаются на карте в виде соответствующих значков (sample_4):

Александр Лобанов
Александр Лобанов

Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново?

Анна Королева
Анна Королева
Беларусь, Минск, Беларуский Государственный Университет Информатики и Радиоэлектроники, 1998
Аббас Гусенов
Аббас Гусенов
Казахстан, Алматы, Казахский национальный технический университет имени К.И. Сатпаева, 2013