Bessere Bewegungsunschärfe auf der Leinwand

Question

Es war schon mal gefragt, aber die akzeptierte Lösung funktioniert bei mir nicht (im wahrsten Sinne des Wortes verschwimmt bei mir nichts in der verlinkten Demo), und es ist ein bisschen kompliziert, zwei Canvas-Elemente einzubeziehen.

Ich verwende derzeit die Bewegungsunschärfetechnik des „armen Mannes“, bei der es im Wesentlichen darum geht, das Quellbild immer wieder auf die Leinwand zu übertragen und nach jeder Iteration ein halbtransparentes Rechteck in der gleichen Farbe wie der Hintergrund darüber abzulegen.

Hier ist eine Demo: http://jsfiddle.net/YmABP/

Wie Sie sehen, funktioniert es gut für die Ränder des Bildes, aber die inneren Teile des Bildes verschwimmen überhaupt nicht, und bei Bildern mit teilweiser Transparenz sieht es schrecklich aus.

Gibt es eine bessere Technik für Bewegungsunschärfe?Im Idealfall würde ich gerne so etwas tun können context.drawImage und übergeben Sie einen Deckkraftparameter, aber AFAIK existiert nichts dergleichen.Einige der Bilder werden möglicherweise auf Domains Dritter gehostet, sodass ich keinen Zugriff auf die einzelnen Pixeldaten habe.Wenn es darauf ankommt, können wir die Bilder auf unseren Server ziehen und dann könnte ich über jedes Pixel iterieren und es als halbtransparentes kleines Rechteck zeichnen, aber das scheint übertrieben zu sein.

Kennt jemand eine bessere Lösung für Bewegungsunschärfe, vorzugsweise eine, die ich mit entfernten Bildern verwenden kann?

Ich bezweifle, dass das von Bedeutung ist, aber für meine derzeitigen Zwecke geht es nur bergauf.

Answer 1

Stellen Sie einfach das ein globalAlpha Eigenschaft des Kontexts, bevor Sie Ihr Bild wiederholt zeichnen:

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

Hast du es versucht StaffeleiJS und sein Unschärfefilter - Versuchen Sie, die Unschärfe in eine Richtung (x oder y) zu ändern/animieren.