Выразительный JavaScript (Хавербеке) - страница 207

Затем, по каждому событию >"mousemove", которое случается, пока кнопка нажата, рисуется простая линия между старой и новой позициями мыши, с использованием тех значений параметров >strokeStyle и >lineWidth, которые заданы в данный момент.

Аргумент >onEnd просто передаётся дальше, в >trackDrag. При обычном вызове третий аргумент передаваться не будет, и при использовании функции он будет содержать >undefined, поэтому в конце перетаскивания ничего не произойдёт. Но он поможет нам организовать ещё один инструмент, ластик >erase, используя очень небольшое дополнение к коду.

>tools.Erase = function(event, cx) {

>  cx.globalCompositeOperation = "destination-out";

>  tools.Line(event, cx, function() {

>    cx.globalCompositeOperation = "source-over";

>  });

>};

Свойство >globalCompositeOperation влияет на то, как операции рисования на холсте меняют цвет пикселей. По умолчанию, значение свойства >"source-over", что означает, что цвет, которым рисуют, накладывается поверх существующего. Если цвет непрозрачный, он просто заменит существующий, но если он частично прозрачный, они будут смешаны.

Инструмент >“erase” устанавливает >globalCompositeOperation в >"destination-out", что имеет эффект ластика, и делает пиксели снова прозрачными.

Вот у нас уже есть два инструмента для рисования. Мы можем рисовать чёрные линии в один пиксель шириной (это задано значениями свойств холста >strokeStyle и >lineWidth по умолчанию), и стирать их. Работающий, хотя и примитивный, прототип программы.

Предполагая, что пользователи захотят рисовать не только чёрным цветом и не только одним размером кисти, добавим элементы управления для этих настроек.

В главе 18 я обсуждал разные варианты полей формы. Среди них не было полей для выбора цвета. По традиции у браузеров нет встроенных полей для выбора цвета, но за последнее время в стандарт включили несколько новых типов полей форм. Один из них — >. Среди других — >"date", >"email", >"url" и >"number". Пока ещё их поддерживают не все. Для тега > тип по умолчанию – >“text”, и при использовании нового тега, который ещё не поддерживается браузером, браузеры будут обрабатывать его как текстовое поле. Значит, пользователям с браузерами, которые не поддерживают инструмент для выбора цвета, необходимо будет вписывать название цвета вместо того, чтобы выбирать его через удобный элемент управления.

>controls.color = function(cx) {

>  var input = elt("input", {type: "color"});

>  input.addEventListener("change", function() {

>    cx.fillStyle = input.value;