- •Билеты по «Информационным технологиям» Весенний семестр 2014/2015
- •2) Основные линии и штрихи
- •Новые элементы управления форм
- •1) Базовые возможности Canvas
- •2) Пути
- •Новые элементы управления форм
- •1)Базовые возможности Canvas
- •2) Текст
- •Новые атрибуты
- •Новые механизмы вывода
- •Проверка
- •Стилевое оформление с помощью css3
- •Краткая характеристика vbScript(второй вариант)
- •2.2.4. Селекторы атрибутов
Билеты по «Информационным технологиям» Весенний семестр 2014/2015
Новые структурные элементы HTML5. Мета-различия.
Новые структурные элементы HTML5. Мета-различия.(второй вариант)
Новые структурные элементы:
<header> - для верхнего колонтитула сайта
<footer> - для нижнего колонтитула сайта
<nav> - навигационные функции страниц (меню)
<article> - создание контента
<section> - используется либо для объединения в группу статей с различными целями или по различным темам или для определения различных разделов 1 статьи. Аналог тега <p>.
<time> - используется для разметки времени и даты
<aside> - определяет блок контента, который связан с основным контентом, но не входит в основной поток.
<hgroup> - используется в начале оболочки вскрытия более одного заголовка.
<figcaption> - описание изображения
<figure> - используется для объединения изображения и текста к изображению
<mark> - выделение терминов в тексте
Некоторые мета-различия:
<DOCTYPE html>
<meta charset=”utf-8”>
Создатели HTML5 выбрали самую короткую возможную строку doctype для этой цели — в конце концов, почему разработчик должен помнить длинную строку, содержащую множество URL, когда в действительности doctype присутствует здесь только для того, чтобы задать для браузера стандартный режим (в противоположность необычному режиму)?
Затем, я хотел бы привлечь ваше внимание к кажущимся "слабым синтаксическим требованиям" HTML5. Я добавил кавычки вокруг всех значений атрибутов, и написал все элементы строчными буквами, но это, на самом деле, связано с привычкой писать по правилам XHTML. Но для кого-то может показаться удивительным открытие, что в HTML5 можно при желании игнорировать эти правила. Фактически не нужно даже беспокоиться о том, чтобы использовать элементы <head>, <body>, или <html>, все будет по-прежнему допустимо!
Основы использования холста. Основные линии и штрихи.
1)Базовые возможности Canvas
Элемент <canvas> предоставляет рабочее пространство для рисования. С точки зрения разметки, это простой до предела элемент с тремя атрибутами — id, width и height:
HTML
<canvas id="drawingCanvas" width="500" height="300"></canvas>
Атрибут id присваивает данному холсту однозначное имя, требуемое для его идентификации кодом JavaScript А атрибуты width и height устанавливают ширину и высоту холста в пикселах, соответственно.
Размеры холста всегда следует устанавливать посредством атрибутов width и height элемента <canvas>, а не с помощью свойств width и height таблицы стилей. В противном случае возможно возникновение проблемы с искажением рисунков.
Обычно холст отображается как пустой прямоугольник без рамки, т.е. он не виден вообще. Чтобы сделать холст видимым, с помощью таблицы стилей ему можно дать цветной фон или рамку, как показано в следующем коде:
CSS
canvas {
border: 1px dashed black;
}
Чтобы рисовать на холсте, нужно написать определенный объем кода JavaScript. Эта задача состоит из двух этапов. Первым делом наш сценарий должен получить объект холста, для чего используется метод document.getElementById. Затем надо получить двумерный контекст рисования, для чего применяется метод getContext():
JS
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
Контекст можно рассматривать как сверхмощный инструмент рисования, который выполняет все необходимые для этого операции, такие как создание прямоугольников, печатание текста, вставка изображений и т.п. Это что-то наподобие универсальной мастерской для операций рисования на холсте.
Тот факт, что контекст явно называется двумерным (и в коде указывается как "2d"), порождает очевидный вопрос, а именно: существует ли трехмерный контекст рисования? Ответ на этот вопрос — пока нет, но ясно, что создатели HTML5 оставили место для него в будущем.
Получить объект контекста и начать рисование можно в любой момент, например, сразу же после загрузки страницы, когда пользователь щелкнет мышью, и т.п. Вам, скорее всего, уже не терпится создать страницу, на которой можно было бы сразу же приступить к практической работе с холстом. В следующем листинге приведен код для создания шаблона такой страницы:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<style>
canvas {
border: 1px dashed black;
}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("drawingCanvas");
var context = canvas.getContext("2d");
// Код для рисования вставляется сюда
}
</script>
</head>
<body>
<canvas id="drawingCanvas" width="500" height="300"></canvas>
</body>
</html>
В разделе разметки <style> для холста создается рамка, указывающая его местонахождение на странице. А в разделе <script> обрабатывается событие window.onload, которое происходит после полной загрузки страницы браузером. После этого код получает объект холста и создает контекст рисования, подготовившись таким образом к рисованию. Эту разметку можно использовать в качестве отправной точке для дальнейших экспериментов с холстом.