更好的画布运动模糊

Better canvas motion blur

本文关键字：运动 模糊 布运动 更好      更新时间：2023-09-26

之前有人问过，但接受的解决方案对我不起作用(从字面上看，在链接的演示中没有任何内容对我来说是模糊的(，而且它涉及两个画布元素有点笨拙。

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

下面是一个演示：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';​

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

相关文章：