Глава 4. Использование возможностей HTML5 — КиберПедия 

История развития хранилищ для нефти: Первые склады нефти появились в XVII веке. Они представляли собой землянные ямы-амбара глубиной 4…5 м...

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...

Глава 4. Использование возможностей HTML5

2017-09-30 344
Глава 4. Использование возможностей HTML5 0.00 из 5.00 0 оценок
Заказать работу

 

4.1. Лабораторная работа № 1. Знакомство с HTML5.
Элементы video и audio. Геолокация. Элемент canvas.

 

Цель: научиться подключать на веб-страницу аудио и видео файлы, определять местоположение пользователя; изучить возможности рисования на веб-странице.

 

Теория

 

HTML5 – это новая версия HTML. Наиболее интересные нововведения HTML5:

- поддержка видео и аудио (элементы video и audio);

- возможности рисования на веб-страницах произвольных объектов (элемент canvas);

- улучшение форм (новые значения type для <input> и множество новых элементов и атрибутов);

- добавление семантических тэгов, позволяющих сделать веб-страницы более понятными для поисковых систем, браузеров и других программ и устройств, читающих веб-страницы (элементы footer, header, nav, article и др.);

- DOM хранилища – более функциональная альтернатива cookie.

 

HTML5 содержит специальный тэг <video>, позволяющий встраивать в веб-страницы видео файлы. Атрибут src тэга <video> позволяет указать путь к видео файлу, атрибут controls отображает в плеере кнопки управления видео, a атрибуты height (высота) и width (ширина) задают размеры плеера. Например,

 

<video src=video.ogv" width="300" height="200" controls="controls"></video>

 

С помощью нового HTML5 элемента <audio> можно добавить на веб-страницу музыкальную композицию. Атрибут src тэга <audio> позволяет указать путь к аудио файлу, а атрибут controls добавляет кнопки управления. Например,

<audio src="stop.ogv" controls="controls"> </audio>

 

С помощью HTML5 геолокации можно определить местоположение пользователя.

Текущая позиция пользователя может быть определена с помощью метода getCurrentPosition() объекта navigator.geolocation.

 

navigator.geolocation.getCurrentPosition(success_function, error_function, options);

 

Параметры метода:

success_function – имя функции, которая будет вызвана в случае удачного считывания координат;

error_function – имя функции, которая будет вызвана при ошибке;

options – задает настройки, которые будут использованы при считывании координат. Возможные значения:

enableHighAccuracy – если имеет значение true, браузер будет пытаться определить местоположение как можно точнее;

timeout – устанавливает максимально допустимое время для считывания данных (по умолчанию не ограничено);

maximumAge – как долго браузер будет хранить к кэше предыдущее сохраненное значение.

Если пользователь разрешил использовать данные о его местоположении и они были удачно считаны браузером, то в функцию success_function в качестве параметров будет передан объект, содержащий свойство timestamp (время считывания координат), и объект coords со следующими свойствами:

- latitude и longitude – широта и долгота местоположения;

- altitude – высота над уровнем моря в метрах;

- accuracy – точность определения широты и долготы (чем больше число, тем меньше точность);

- altitudeAccuracy – точность определения высоты (чем больше число, тем меньше точность);

- heading – направление пользователя в градусах (т.е. 0 градусов значит, что пользователь направляется на север, 180 на юг и т.д.)

- speed – скорость перемещения в метрах в секунду.

 

В следующем примере определяются широта и долгота местоположения пользователя:

 

<html>

<script>

function getCoordinates() {

navigator.geolocation.getCurrentPosition(showCoordinates);

}

function showCoordinates(position) {

document.write("Широта:" + position.coords.latitude + "<br/>");

document.write("Долгота:" + position.coords.longitude);

}

</script>

<body>

<p>Для считывания координат нажмите на кнопку</p>

<input type="button" value=" Координаты" onclick =

"getCoordinates()">

</body>

</html>

 

Элемент <сanvas>

Элемент <сanvas> позволяет рисовать на веб-страницах произвольные фигуры с помощью JavaScript (или других клиентских скриптов). Cам по себе canvas ничего не рисует, это холст, который предоставляет возможности для рисования.Создать canvas можно так:

 

<canvas id='draw' width='300' height='200'>…</canvas>.

 

Для создания прямоугольников:

fillRect(x,y,ширина,высота) – рисует закрашенный прямоугольник;

strokeRect(x,y,ширина,высота) – не закрашенный прямоугольник;

clearRect(x,y,ширина,высота) – очищает указанную зону (x и y – величина смещения прямоугольника от верхнего левого угла холста в пикселях).

В следующем примере на экран выводятся два прямоугольника: закрашенный с очищенной зоной внутри и не закрашенный. Первые две строки являются стандартными для рисования любого объекта в canvas. var canvas = document.getElementById("draw");var x=canvas.getContext("2d");x.fillRect(50,40,55,55);x.strokeRect(150,70,55,55);

x.clearRect(68,57,20,20);

 

 

Рисование составных фигур

Составные фигуры состоят из нескольких соединенных простых объектов.

moveTo(x,y) – устанавливает координаты точки, из которой начнется рисование следующего объекта;

lineTo(x,y) – рисует прямую линию:

arc(x,y,радиус,нач_угол,конеч_угол) – рисует круг. Угол необходимо задавать в радианах, (радианы=(Math.PI/180)*градусы);

rect(x, y, ширина, высота) – рисует прямоугольник.

x.beginPath();x.moveTo(20,20);x.lineTo(70,70);x.lineTo(20,70);x.closePath();x.fill();

 

Для раскрашивания нарисованных в canvas фигур предусмотрены свойства: fillStyle (применяется к закрашенным фигурам) и strokeStyle (к незакрашенным фигурам).

 

x.fillStyle="green";x.strokeStyle="#FF45FF"x.fillStyle="rgb(255,73,73)"x.fillStyle="rgba(0,0,0,0.5)" //(0.5 – прозрачность)

Для оформления линий используются: lineWidth – ширина линии, lineCap – кончики линий (round – закругленные), lineJoin – сглаживание стыков двух линий (round).

 

Градиент

СreateLinearGradient(x1,y1,x2,y2) – создать линейный градиент, x1 и y1 координаты начальной, x2 и y2 – конечной точки градиента. После создания градиента надо указать цвета перехода с помощью метода addColorStop(точка,цвет).

 

var grad =x.createLinearGradient(0,0,0,150);grad.addColorStop(0.0,'black');grad.addColorStop(1.0,'white');x.fillStyle=grad;x.fillRect(20,20,200,200);

Создание теней

shadowOffsetX – смещение тени от объекта по горизонтали (может быть отрицательным).

shadowOffsetY – смещение тени по вертикали (может быть отрицательным)

shadowBlur – величина размытия тени

shadowColor – цвет тени (по умолчанию черный).

x.shadowOffsetX=3;x.shadowOffsetY=3;x.shadowBlur=5;x.shadowColor='black';x.fillStyle='#ffaa00';x.fillRect(50,40,55,55);

Текст

Метод fillText("текст",x,y) позволяет отображать в элементе canvas произвольный текст, который может быть оформлен с помощью свойства font.

 

x.font='15px Verdana';x.fillStyle='#60016d';x.fillText("Я студент БГТУ", 10, 40);

Вставка изображений

В canvas могут быть вставлены изображения форматов PNG, GIF и JPEG с помощью метода drawImage('ссылка на картинку',x,y)

 

<img id='image1' src='ris.jpg' style='display:none;'/><canvas id='draw' width='400' height='300' style='border:1px solid'></canvas><script>Var img=document.getElementById('image1');var canvas=document.getElementById("draw")var x=canvas.getContext("2d");x.drawImage(img,10,10);</script>

 

Задания для лабораторной работы № 1

 

Задание 1. Создать новую веб-страницу. Вставит заголовок в центре страницы «Я, ФИО, изучаю HTML5». Подсветить ФИО с помощью тега <mark>.

Задание 2. Вставить аудио и видео файлы.

Задание 3. Определить свои координаты с помощью геолокации.

Задание 4. Нарисовать любую картинку (можно домик), используя простые фигуры. Применить возможности для оформления – цвет, тени, градиент. Созданную картинку подписать (свои ФИО).

 

 


Поделиться с друзьями:

Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...

Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...

Двойное оплодотворение у цветковых растений: Оплодотворение - это процесс слияния мужской и женской половых клеток с образованием зиготы...

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.022 с.