Лучшее размытие при движении на холсте

Question

Это было спрашивал раньше, но принятое решение не работает для меня (буквально, для меня ничего не размывается в связанной демонстрации), и это небольшая путаница, связанная с двумя элементами canvas.

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

Вот демо-версия: http://jsfiddle.net/YmABP/

Как вы можете видеть, это хорошо работает с краями изображения, но внутренние части изображения в конечном итоге вообще не размываются, и это выглядит ужасно на изображениях с частичной прозрачностью.

Есть ли лучшая техника для размытия в движении?В идеале я хотел бы иметь возможность делать что-то вроде context.drawImage и передайте параметр непрозрачности, но AFAIK ничего подобного не существует.Некоторые изображения могут быть размещены на сторонних доменах, поэтому у меня не будет доступа к отдельным пиксельным данным.Если дойдет до этого, мы можем перенести изображения на наш сервер, а затем я мог бы перебрать каждый пиксель и нарисовать его в виде полупрозрачного крошечного прямоугольника, но это кажется излишеством.

Кто-нибудь знает о лучшем решении для размытия в движении, предпочтительно таком, которое я мог бы использовать с удаленными изображениями?

Я сомневаюсь, что это имеет значение, но для моих нынешних целей все движется только вверх.

Answer 1

Просто установите globalAlpha свойство контекста перед повторным рисованием вашего изображения:

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/qfEUt/

var img = new Image,
    ctx = document.querySelector('canvas').getContext('2d');
    ctx.globalAlpha = 0.1;

img.onload=function(){
  for (var y=0;y<10;++y) ctx.drawImage(img,0,y);
}
img.src = 'http://phrogz.net/tmp/gkhead-small.png';​

Answer 2

Вы пробовали Мольберт JS и его Фильтр размытия - попробуйте изменить / анимировать размытие в одном направлении (x или y).