Цвет и размер кисти

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

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

controls.color = function(cx) {

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

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

    cx.fillStyle = input.value;

    cx.strokeStyle = input.value;

  });

  return elt("span", null, "Color: ", input);

};

При смене значения поля color значения свойств контекста холста fillStyle и strokeStyle заменяются на новое значение.

Настройка размера кисти работает сходным образом.

controls.brushSize = function(cx) {

  var select = elt("select");

  var sizes = [1, 2, 3, 5, 8, 12, 25, 35, 50, 75, 100];

  sizes.forEach(function(size) {

    select.appendChild(elt("option", {value: size},

                           size + " pixels"));

  });

  select.addEventListener("change", function() {

    cx.lineWidth = select.value;

  });

  return elt("span", null, "Brush size: ", select);

};

Код создаёт варианты размеров кистей из массива, и убеждается в том, что свойство холста lineWidth обновлено при выборе кисти.