8

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

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

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

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

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

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

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

4

2 回答 2

7

只需在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';​
于 2012-05-21T22:26:39.100 回答
2

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

于 2012-05-21T22:35:47.753 回答