2) Пути
Пути холста позволяют рисовать произвольные фигуры. Вы чертите сначала "контур", затем выбираете для рисования штрих и в конце заполняете при желании фигуру. Создание специальной фигуры выполняется легко – чтобы начать рисовать путь, используйте beginPath(), затем начертите путь, который формирует фигуру с помощью прямых линий, кривых и других примитивов. Когда закончите, вызовите fill и stroke, если хотите заполнить фигуру или нарисовать штрихи, затем вызовитеclosePath(), чтобы закончить рисование фигуры.
Следующий пример показывает рисование треугольника:
// Задаем свойства стиля оформления.
context.fillStyle = '#00f';
context.strokeStyle = '#f00';
context.lineWidth = 4;
context.beginPath();
// Начинаем с верхней левой точки.
context.moveTo(10, 10); // задаем координаты (x,y)
context.lineTo(100, 10);
context.lineTo(10, 100);
context.lineTo(10, 10);
// Готово! Теперь заполните фигуру, и начертите штрихи.
// Примечание: фигура будет невидимой, пока не будет вызван
// любой из этих трех методов.
context.fill();
context.stroke();
context.closePath();
Это порождает вызов, показанный на рисунке 6.2.
Рис. 6.2. Простой треугольник
Новые элементы управления форм (работа с цветом, поиск, раскрывающийся список с возможностью добавления своих вариантов).
Новые элементы управления форм
Так как формы являются основным инструментом ввода данных в приложениях Web, а требуемые для сбора данные стали более сложными, возникла необходимость создать элементы ввода с дополнительными возможностями, чтобы собирать эти данные с дополнительной семантикой и лучшим определением, и предоставить более простое, более эффективное управление ошибками и проверкой.
<input type="color">
Этот тип элемента ввода предоставляет элемент выбора цвета. Реализация в Opera позволяет пользователю выбрать из набора цветов, ввести шестнадцатеричные значения прямо в текстовое поле, или вызвать собственную процедуру выбора цвета операционной системы.
Элемент ввода color, и собственные инструменты выбора цвета в Windows и OS X
<input type="search">
Тип элемента ввода search является, возможно, ничем иным, чем иначе оформленным текстовым элементом ввода. Предполагается, что браузеры будут оформлять эти элементы ввода таким же образом, как оформляются любые функции поиска в конкретной операционной системе. Тем не менее, помимо этих чисто эстетических соображений, важно отметить, что явная разметка полей поиска открывает для браузеров, вспомогательных технологий, и автоматизированных сканеров возможность сделать в будущем что-то полезное с помощью этих элементов ввода – например, браузер мог бы, возможно, предложить пользователю возможность автоматически создать индивидуальный поиск для определенного сайта.
Элемент ввода search, как он выглядит в браузере Opera в OS X
Элемент <datalist> и атрибут list
До сих пор мы привыкли использовать элементы <select> и <option> для создания раскрывающихся списков вариантов выбора для пользователей. Но как быть, если мы захотим создать список, который позволял бы пользователям выбирать из списка предложенных вариантов, а также позволял вводить свои собственные? Это требует кропотливого создания сценария – но теперь можно просто использовать атрибут list, чтобы соединить обыкновенный элемент ввода со списком вариантов, определенным в элементе <datalist>.
<input type="text" list="mydata" … >
<datalist id="mydata">
<option label="Mr" value="Mister">
<option label="Mrs" value="Mistress">
<option label="Ms" value="Miss">
</datalist>
Создание элемента ввода с предложениями с помощью datalist
Основы использования холста. Текст.