已经asked before ，但公认的解决方案对我不起作用(从字面上看，链接的演示中对我来说没有任何模糊之处)，而且涉及两个 Canvas 元素有点困惑。
我目前正在使用“穷人的”运动模糊技术，它基本上涉及将源图像一遍又一遍地传输到 Canvas ，并在每次迭代后在顶部放置一个与背景颜色相同的半透明矩形。
这是一个演示:http://jsfiddle.net/YmABP/
如您所见，它对图像的边缘效果很好，但图像的内部部分根本不会模糊，而且对于具有部分透明度的图像来说看起来很糟糕。
是否有更好的运动模糊技术？理想情况下，我希望能够执行类似 context.drawImage 的操作并传入不透明度参数，但 AFAIK 不存在类似的东西。有些图像可能托管在第三方域上，因此我无法访问单个像素数据。如果归根结底，我们可以将图像拉到我们的服务器上，然后我可以遍历每个像素并将其绘制为半透明的小矩形，但这似乎有点过分了。
有谁知道更好的运动模糊解决方案，最好是我可以用于远程图像的解决方案？
我怀疑这是否重要，但就我目前的目的而言，事情只会向上发展。
最佳答案
只需设置 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';
关于javascript - 更好的 Canvas 运动模糊，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10693448/