2) Основные линии и штрихи
Мы уже видели в примере выше, что действительно легко рисовать прямоугольники, раскрашенные требуемым образом.
С помощью свойств fillStyle и strokeStyle можно легко задать цвета, используемые для изображения заполненных фигур и штрихов. Значения цветов, которые можно использовать, такие же как и в CSS: шестнадцатеричные коды, rgb(), rgba() и дажеhsla(), если браузер поддерживает это (например, это свойство поддерживается в Opera 10.00 и более поздних версиях).
С помощью fillRect можно рисовать заполненные прямоугольники. С помощью strokeRect можно рисовать прямоугольники, используя только границы, без заполнения. Если вы хотите очистить некоторую часть холста, можно использовать clearRect. Эти три метода используют одинаковые аргументы: x, y, width, height. Два первых аргумента сообщают координаты (x,y), а два последних аргумента задают ширину и высоту прямоугольника.
Чтобы изменить толщину линий, можно использовать свойство lineWidth. Давайте посмотрим на пример, который используетfillRect, strokeRect, clearRect и другие возможности:
context.fillStyle = '#00f'; // синий
context.strokeStyle = '#f00'; // красный
context.lineWidth = 4;
// Рисуем несколько прямоугольников.
context.fillRect (0, 0, 150, 50);
context.strokeRect(0, 60, 150, 50);
context.clearRect (30, 25, 90, 60);
context.strokeRect(30, 25, 90, 60);
Этот пример создает вывод, который можно видеть на рисунке 6.1.
Новые элементы управления форм (ввод чисел, «ползунок», элементы управления датой/временем).
Новые элементы управления форм
Так как формы являются основным инструментом ввода данных в приложениях Web, а требуемые для сбора данные стали более сложными, возникла необходимость создать элементы ввода с дополнительными возможностями, чтобы собирать эти данные с дополнительной семантикой и лучшим определением, и предоставить более простое, более эффективное управление ошибками и проверкой.
<input type="number">
Первый новый тип элемента ввода, который мы рассмотрим, будет тип ввода number (числа):
<input type="number" … >
Он создает специальный вид поля ввода для числа – в большинстве поддерживающих браузеров оно появляется как текстовое поле ввода со счетчиком, который позволяет увеличивать и уменьшать его значение.
Тип элемента ввода number
<input type="range">
Создание элемента управления ползунка, позволяющего выбирать в диапазоне значений, было обычно сложным, семантически неясным предложением, но в HTML5 все стало легко – вы используете просто тип ввода range (диапазон):
<input type="range" … >
Тип элемента ввода range
Отметим, что, по умолчанию, этот элемент ввода обычно не показывает выбранное в данный момент значение, или даже диапазон значений, который он охватывает. Автору нужно будет предоставить их с помощью других средств – например, для отображения текущего значения можно было бы использовать элемент вывода вместе с некоторым кодом JavaScript для обновления вывода, когда пользователь взаимодействует с формой:
<output onforminput="value=weight.value"></output>
<input type="date"> и другие элементы управления датой/временем
HTML5 имеет ряд различных типов элементов ввода для создания сложных средств выбора даты/времени, например, показанное ниже средство выбора даты имеется почти на каждом существующем сайте бронирования самолета/поезда. Такие средства обычно создавались с помощью несемантического путаного кода, поэтому здорово, что теперь существует стандартизованный простой способ сделать это. Например:
<input type="date" … >
<input type="time" … >
Соответственно эти коды создают полностью функциональное средство выбора даты, и элемент ввода текста, содержащий разделитель для часов, минут и секунд (в зависимости от указанного атрибута step ), который позволяет вводить только значение времени.
Типы элементов ввода date и time
Но на этом все не кончается – доступен ряд других связанных типов элементов ввода:
datetime: объединяет функции обоих рассмотренных выше элементов, позволяя выбрать дату и время.
month: позволяет выбрать месяц, сохраняя его внутренне как число между 1-12, хотя различные браузеры могут предоставлять более развитый механизм выбора, например, как прокручиваемый список названий месяцев.
week: позволяет выбрать неделю, сохраняемую внутренне в формате 2010-W37 (37 неделя 2010 года), и выбирать с помощью элемента выбора даты, аналогичного тому, что мы уже видели.
Основы использования холста. Пути.