JavaScript. Подробное руководство, 6-е издание

На рис. 21.16 показаны все 11 видов композиции пикселов с «предельными» значениями прозрачности: все пикселы являются полностью непрозрачными или полностью прозрачными. В каждом из 11 прямоугольников сначала рисовался квадрат, который представляет целевые пикселы. Затем устанавливалось свойство globalCompositeOperation и рисовался круг, представляющий исходные пикселы.

Рис. 21.16. Виды композиции пикселов с предельными значениями прозрачности

На рис. 21.17 изображен похожий пример, в котором использовались пикселы с «промежуточными» значениями прозрачности. В этой версии исходный круг и целевой квадрат были залиты градиентами, вследствие чего в рисунке присутствуют пикселы с различной степенью прозрачности.

Вы можете обнаружить, что понять действие того или иного вида композиции совсем непросто, когда в операцию вовлечены полупрозрачные пикселы, как в данном примере. Если у вас есть желание более глубоко разобраться с композицией, в справочной статье CanvasRenderingContext2D вы найдете уравнения вычисления конечного значения цвета пиксела, исходя из значений цвета исходного и целевого пикселов для всех 11 видов композиции.

Рис. 21.17. Виды композиции пикселов с промежуточными значениями прозрачности

На момент написания этих строк производители броузеров не смогли прийти к единству в реализации 5 из 11 видов композиции: «сору», «source-іп», «source-out», «destination-atop» и «destination-in» действуют по-разному в разных броузерах и не могут использоваться переносимым образом. Далее приводится подробное описание этих различий, но если вы не планируете использовать эти виды композиций, то можете сразу перейти к следующему разделу.

При использовании пяти видов композиции, перечисленных выше, цвет целевых пикселов либо игнорируется при вычислении результатов, либо получающиеся пикселы делаются прозрачными, если прозрачными являются исходные пикселы. Различия в реализациях связаны с определением исходных пикселов. Броузеры Safari и Chrome выполняют композицию «локально»: в расчетах участвуют только фактические исходные пикселы, которые выводятся методами fill, stroke и другими. IE9, вероятно, последует этому примеру. Броузеры Firefox и Opera выполняют композицию «глобально»: в расчетах участвуют все пикселы в текущей области отсечения при выполнении любой операции рисования. Если для данного целевого пиксела отсутствует исходный пиксел, считается, что исходный пиксел имеет черный прозрачный цвет. В Firefox и Opera это означает, что пять видов композиции, перечисленные выше, фактически стирают целевые пикселы внутри области отсечения там, где отсутствуют исходные пикселы. Изображения на рис. 21.16 и рис. 21.17 были получены в броузере Firefox. Это объясняет, почему рамки, окружающие примеры применения видов композиции «сору», «source-іп», «source-out», «destination-atop» и «destination-in», тоньше, чем рамки вокруг других примеров: прямоугольник, окружающий каждый пример, является областью отсечения, и применение этих пяти видов композиции приводит к стиранию части рамки (половина lineWidth), попадающей внутрь контура. Для сравнения на рис. 21.18 показаны те же результаты, что и на рис. 21.17, но полученные в броузере Chrome.

На момент написания этих строк проект стандарта HTML5 утвердил глобальный подход к композиции, реализованный в броузерах Firefox и Opera. Производители броузеров знают об имеющейся несовместимости и не удовлетворены текущим состоянием спецификации. Велика вероятность, что спецификация будет пересмотрена в пользу локальной композиции.

Наконец, обратите внимание, что в броузерах, таких как Safari и Chrome, реализующих локальную композицию, существует возможность реализовать глобальную композицию. Сначала нужно создать пустой неотображаемый холст с теми же размерами, что и отображаемый. Затем нарисовать исходное изображение на неотображаемом холсте и вызвать метод drawlmage, чтобы скопировать неотображаемый рисунок в отображаемый холст и применить глобальную композицию в пределах области отсечения. В броузерах, таких как Firefox, реализующих глобальную композицию, нет универсального приема выполнения локальной композиции, но нередко можно получить достаточно близкий эффект, определив соответствующую область отсечения перед выполнением операции рисования, для которой композиция должна выполняться локально.

21.4.14. Манипулирование пикселами

Метод getlmageData возвращает объект ImageData, представляющий массив пикселов (в виде компонентов R, G, В и А) из прямоугольной области холста. Создать пустой объект ImageData можно с помощью метода createImageData. Пикселы в объекте ImageData доступны для записи, благодаря чему их можно изменить как угодно и затем скопировать обратно в холст вызовом метода putlmageData.

Эти методы манипулирования пикселами предоставляют низкоуровневый доступ к холсту. Координаты и размеры области, передаваемой методу getlmageData, задаются в системе координат по умолчанию: ее размеры измеряются в CSS-пикселах и без учета текущего преобразования. При вызове метода putlmageData координаты также задаются в системе координат по умолчанию. Кроме того, метод putImageData игнорирует все графические атрибуты. Он не использует механизм композиции, не умножает пикселы на значение свойства globalAlpha и не рисует тени.

Методы манипулирования пикселами могут пригодиться для реализации обработки изображений. Пример 21.10 демонстрирует, как создать простейший эффект размытия или «смазывания» быстро движущегося объекта в элементе <canvas>~ Пример демонстрирует применение методов getlmageData и putlmageData и показывает, как выполнять итерации по пикселам в объекте ImageData и изменять их значения, но без подробного описания. Полная информация о методах getlmageData и putlmageData приводится в справочной статье CanvasRenderingContext2D, а подробное описание объекта ImageData– в его собственной справочной статье.

Пример 21.10. Создание эффекта размытия быстродвижущегося объекта с помощью объекта ImageData

  // "Смазать" пикселы прямоугольной области вправо, чтобы воспроизвести эффект быстрого
  // движения объекта справа налево. Значение п должно быть равно или больше 2. Нем больше
  // значение, тем сильнее эффект смазывания. Координаты и размеры прямоугольной области
  // задаются в системе координат по умолчанию,
  function smear(c, п, х, у, w, h) {
   // Получить объект ImageData, представляющий пикселы области эффекта
   var pixels = c.getImageData(x,у,w,h);

   // Смазывание выполняется на месте, и потому требуется получить только
   // исходный объект ImageData. Некоторые алгоритмы обработки изображений требуют
   // использования дополнительного объекта ImageData для сохранения трансформированных
   // значений пикселов. Если бы потребовался промежуточный буфер вывода, можно было бы
   // создать новый объект ImageData с теми же размерами следующим способом:
   // var output_pixels = с.createlmageData(pixels):
   // Эти размеры могут отличаться от значений аргументов w и h: на каждый