Перспективные языки веб-разработки

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

Показывать лекцию целиком

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

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

Еще более зрелищных результатов можно добиться, используя возможности элемента управления ), в котором собрано множество очень интересных примеров, подчеркивающих возможности 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):

MathML

(http://comp-science.narod.ru/mml/mathml.htm)

Математики являются активными пользователями Интернета, однако до недавнего времени стандарт HTML не позволял работать с математическими формулами.Ситуация изменилась с появлением подмножества языка расширенной разметки - языка MathML. При этом математические конструкции встраиваются в обычную HTML-разметку. Корректное отображение математических символов возлагается на браузер.

Корневым элементом MathML является тэг <math>…</math>. Рассмотрим некоторые правила синтаксиса MathML.

  • Идентификаторы обозначаются тегами mi: <mi>x</mi>
  • Числа обозначаются тегами mn: <mn>2012</mn>
  • Операторы обозначаются тегами mo: <mo>+</mo>
  • Текстовая строка: ms: <ms>О сколько нам открытий чудных…</ms>
  • Группировка выражений в строку: mrow: 
    <msqrt>
<mrow>
<mi>x</mi>
<mo>-</mo>
<mi>y</mi>
</mrow>
</msqrt>

    Результат: $$\sqrt{x-y}$$

  • Формирование дроби mfrac: 
    <mfrac>
<mi>x</mi>
<mi>y</mi>
</mfrac>

    Результат: $$\frac{x}{y}$$

  • Формирование скобок mfenced: 
    <mfenced>
<mrow>
<mi>a</mi>
<mo> + </mo>
<mi>b</mi>
</mrow>
</mfenced>

    Результат: $$(a+b)$$

  • Нижний индекс msub: 
    <msub>
<mi>x</mi>
<mn>0</mn>
</msub>

    Результат: $$x_0$$

  • Верхний индекс msup: 
    <msup>
<mi>x</mi>
<mi>2</mi>
</msup>

    Результат: $$x^2$$

    •

    Рассмотрим более сложный пример - уравнение сферы (sample_5)

    <!DOCTYPE html>
<html>
<head>
<title>MathML in HTML5</title>
</head>
<body>
<math>
<msup>
<mfenced>
<mrow>
<mi>x</mi>
<mo> - </mo>
<msub>
<mi>x</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mfenced>
<mrow>
<mi>y</mi>
<mo> - </mo>
<msub>
<mi>y</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>+</mo>
<msup>
<mfenced>
<mrow>
<mi>z</mi>
<mo> - </mo>
<msub>
<mi>z</mi>
<mn>0</mn>
</msub>
</mrow>
</mfenced>
<mn>2</mn>
</msup>
<mo>=</mo>
<mrow>
<msup>
<mi>R</mi>
<mn>2</mn>
</msup>
</mrow>
</math>
</body>
</html>

    Результат: $$(x-x_0)^2+(y-y_0)^2+(z-z_0)^2=R^2$$

    Масштабируемая векторная графика - Scalable Vector Graphics (SVG)

    (http://ru.wikipedia.org/wiki/SVG)

    Масштабируемая векторная графика позволяет описывать в XML-формате векторную и смешанную векторно-растровую графику. В SVG-документы можно вставлять растровые изображения в форматах PNG, GIF или JPG. SVG-файлы можно читать и редактировать в обычном текстовом редакторе. Технология SVG поддерживает анимацию. Для описания динамических сцен предложен язык SMIL (SynchronizedMultimediaIntegrationLanguage). Сценарии анимации можно писать на языке JavaScript.

    Рассмотрим несколько примеров создания графических изображений с помощью SVG.

    Пример 1. Круг

    <!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<svgxmlns="http://www.w3.org/2000/svg"version="1.1">
<circlecx="100"cy="100"r="50"stroke="blue"stroke-width="1"fill="orchid"/>
</svg>
</body>
</html>

    Пример 2. Треугольник

    <!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

<svgxmlns="http://www.w3.org/2000/svg"version="1.1">
<polygonpoints="5 5, 30 80, 150 40"
fill="red"stroke="black"/>
</svg>
</body>
</html>

    Пример 3. Текст

    <!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<svgxmlns="http://www.w3.org/2000/svg"version="1.1"width="800"height="600">
<textx="5"y="25"fill="green"font-family="Comic Sans Ms">Кто просвящен и ремеслу обучен, тот славен, горд, в компании нескучен...</text>
</svg>
</body>
</html>
    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^