Migliore tela di motion blur

Question

E ' stato chiesto prima, ma la soluzione accettata non funziona per me (letteralmente, nulla è sfocatura per me collegate demo), ed è un po ' di un kludge che coinvolge due tela elementi.

Attualmente sto usando il "povero" motion blur tecnica, che comporta fondamentalmente dalla fonte immagine sulla tela, e l'eliminazione di una semi-trasparente rettangolo dello stesso colore di sfondo in cima dopo ogni iterazione.

Ecco una demo: http://jsfiddle.net/YmABP/

Come si può vedere, funziona bene per i bordi dell'immagine, ma le parti interne dell'immagine non finiscono di sfocatura a tutti, e sembra terribile, con le immagini che hanno una trasparenza parziale.

C'è una tecnica migliore per il motion blur?Idealmente, mi piacerebbe essere in grado di fare qualcosa di simile context.drawImage e passare un parametro opacità, ma per quanto ne sappia niente di tutto questo esiste.Alcune delle immagini può essere ospitato su domini di terze parti e, pertanto, non hanno accesso ai singoli dati dei pixel.Se si scende ad esso, siamo in grado di estrarre le immagini sul nostro server e quindi potrei ripetere per ogni pixel e disegnare come un semi-trasparente piccolo rettangolo, ma questo mi sembra eccessivo.

Qualcuno conosce meglio il motion blur soluzione, preferibilmente uno che posso usare con immagini da remoto?

Dubito che conta, ma per il mio scopo, le cose si muovono solo verso l'alto.

Answer 1

Basta impostare il globalAlpha proprietà di contesto prima di disegnare la vostra immagine più volte:

Demo: 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

Hai provato EaselJS e la sua BlurFilter - provare a cambiare/animazione sfocatura in una direzione (x o y).