更好的画布运动模糊

Question

之前有人问过,但是接受的解决方案对我来说不起作用(字面意思是,在链接的演示中没有任何东西对我来说模糊),而且它有点像涉及两个画布元素的kludge.

我目前正在使用"穷人"的运动模糊技术,它主要涉及将源图像一遍又一遍地对画布进行布局,并在每次迭代后丢弃与顶部背景颜色相同的半透明矩形.

这是一个演示: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';?