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

   // CSS-пиксел может приходиться несколько аппаратных пикселов,
   var width = pixels.width,
   height = pixels.height:

   // Это массив байтов, хранящий информацию о пикселах, слева направо и сверху вниз.
   // Для каждого пиксела отводится 4 последовательных байта, в порядке R,G,В,А.
   var data = pixels.data;

// Смазать каждый пиксел после первого в каждой строке, заменив его суммой
   // 1/n-й доли его собственного значения и m/n-й доли значения предыдущего пиксела
   var m = n-1;
   for(var row = 0; row < height: row++) { // Для каждой строки
   var і = row*width*4 +4; // Индекс второго пиксела в строке
   for(var col = 1; col < width; col++, і += 4) { // Для каждого столбца
   data[i] = (data[і] + data[i-4]*m)/n; // Красная составляющая
   data[i+1] = (data[i+1] + data[i-3]*m)/n; // Зеленая
   data[i+2] = (data[i+2] + data[i-2]*m)/n; // Синяя
   data[i+3] = (data[i+3] + data[i-1]*m)/n; // Альфа-составляющая
   }
   }
   // Скопировать смазанное изображение обратно в ту же позицию в холсте
   с.putImageData(pixels, х, у);
  }

Обратите внимание, что на метод getImageData накладываются те же ограничения политики общего происхождения, что и на метод toDataURL: он не будет работать с холстами, в которые вставлялись изображения (непосредственно, вызовом метода drawImage, или косвенно, с помощью метода CanvasPattern), имеющие происхождение, отличное от происхождения документа, содержащего элемент <canvas>.

21.4.15. Определение попадания

Метод isPointInPath позволяет узнать, находится ли указанная точка внутри (или на границе) текущего контура, и возвращает true, если это так, и false-в противном случае. Метод принимает координаты точки в не преобразованной системе координат по умолчанию. Это позволяет использовать метод для определения попадания: определения принадлежности точки, где был выполнен щелчок мышью, некоторой определенной фигуре.

Однако значения свойств clientX и clientY объекта MouseEvent нельзя передать непосредственно методу isPointlnPath. Во-первых, координаты события мыши следует преобразовать из координат объекта Window в относительные координаты элемента <canvas>. Во-вторых, если экранные размеры холста отличаются от его фактических размеров, координаты мыши необходимо перевести в соответствующий масштаб. В примере 21.11 показана вспомогательная функция, используемая для определения попадания точки события MouseEvent в текущий контур.

Пример 21.11. Проверка попадания точки события мыши в текущий контур

  // Возвращает true, если указанное событие мыши возникло в текущем контуре
  // в указанном объекте CanvasRenderingContext2D.
  function hitpath(context, event) {
   // Получить элемент <canvas> из объекта контекста
   var canvas = context.canvas;

   // Получить координаты и размеры холста
   var bb = canvas.getBoundingClientRect;

   // Преобразовать и масштабировать координаты события мыши в координаты холста
   var х = (event.clientX-bb.left)*(canvas.width/bb.width);
   var у = (event.clientY-bb.top)*(canvas.height/bb.height);

   // Вызвать isPointlnPath с преобразованными координатами
   return context.isPointInPath(x,y);
  }

Эту функцию hitpath можно использовать в обработчиках событий, как показано ниже:

  canvas.onclick = function(event) {
   if (hitpath(this.getContext("2d"), event) {
   alert("Ecть попадание!"); // Щелчок в пределах текущего контура
   }
  };

Вместо проверки попадания в текущий контур с помощью метода getlmageData можно определить, окрашен ли пиксел в точке события мыши. Если пиксел (или пикселы) под указателем мыши оказался полностью прозрачным, следовательно, под указателем мыши ничего не было нарисовано и щелчок был выполнен за пределами какой-либо фигуры. Пример 21.12 демонстрирует, как реализовать подобную проверку попадания.

Пример 21.12. Проверка наличия окрашенного пиксела в точке события мыши

  // Возвращает true, если указанное событие мыши возникло в точке,
  // где находится непрозрачный пиксел,
  function hitpaint(context, event) {
   // Преобразовать и масштабировать координаты события мыши в координаты холста
   var canvas = context.canvas;