更好的画布运动模糊

Question

它已经 之前问过, ，但接受的解决方案对我不起作用（从字面上看，在链接的演示中没有任何东西对我来说是模糊的），而且它有点涉及两个画布元素。

我目前正在使用“穷人的”运动模糊技术，该技术基本上涉及一遍又一遍地将源图像传输到画布上，并在每次迭代后在顶部放置一个与背景颜色相同的半透明矩形。

这是一个演示： http://jsfiddle.net/YmABP/

正如您所看到的，它对于图像的边缘效果很好，但图像的内部部分最终不会变得模糊，并且对于具有部分透明度的图像来说看起来很糟糕。

有更好的运动模糊技术吗？理想情况下，我希望能够做类似的事情 context.drawImage 并传递一个不透明度参数，但据我所知，不存在这样的东西。某些图像可能托管在第三方域上，因此我无法访问各个像素数据。如果归根结底，我们可以将图像拉到我们的服务器上，然后我可以迭代每个像素并将其绘制为半透明的小矩形，但这似乎有点矫枉过正。

有谁知道更好的运动模糊解决方案，最好是我可以与远程图像一起使用的解决方案？

我怀疑这是否重要，但就我目前的目的而言，事情只会向上发展。

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

你有没有尝试过 画架JS 和它的 模糊滤镜 - 尝试在一个方向（x 或 y）上更改/动画模糊。