Question

它已经asked before，但是已接受的解决方案对我不起作用（字面意思是，在链接的演示中没有任何东西对我来说模糊），而且它有点像涉及两个画布元素的kludge。

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

正如您所看到的，它适用于图像的边缘，但图像的内部部分根本不会模糊，而且对于具有部分透明度的图像看起来很糟糕。

是否有更好的运动模糊技术？理想情况下，我希望能够执行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

您是否尝试了EaselJS及其BlurFilter - 尝试在一个方向（x或y）更改/动画模糊。

更好的画布运动模糊

2 个答案:

演示：http://jsfiddle.net/qfEUt/