Melhor tela de motion blur

Question

Foi perguntado antes de, mas a solução aceita não funciona para mim (literalmente, nada está a diluir-me na vinculado demo), e é um pouco de um kludge, envolvendo dois elementos de tela.

Eu estou usando atualmente, o "pobre homem" motion blur técnica, que envolve basicamente blitting a imagem da fonte para a tela mais e mais, e soltando um semi-transparente retângulo de mesma cor como plano de fundo no topo depois de cada iteração.

Veja uma demonstração: http://jsfiddle.net/YmABP/

Como você pode ver, ele funciona muito bem para as bordas da imagem, mas o interior, partes da imagem não acabar desfoque em tudo, e parece terrível, com imagens que ter transparência parcial.

Existe uma técnica melhor para o desfoque de movimento?Idealmente, eu gostaria de ser capaz de fazer algo como context.drawImage e passar um parâmetro opacidade, mas AFAIK nada que existe.Algumas das imagens podem ser hospedados em terceiros, domínios, então não vou ter acesso ao pixel individual de dados.Se se trata baixo para ele, podemos puxar as imagens para o nosso servidor e, em seguida, eu poderia iterar sobre cada pixel e desenhá-lo como um semi-transparente pequeno retângulo, mas este parece ser um exagero.

Alguém sabe de uma melhor desfoque de movimento solução, de preferência um que eu possa usar com imagens remotas?

Eu duvido que isso é muito importante, mas para os meus objetivos atuais, coisas que só se move para cima.

Answer 1

Basta definir o globalAlpha propriedade de contexto antes de desenhar a sua imagem várias vezes:

Demonstração: 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

Você já tentou EaselJS e o seu BlurFilter - tente alterar/animação borrão em uma direção (x ou y).