更好的画布运动模糊 [英] Better canvas motion blur

问题描述

这是​​之前提问，但接受的解决方案'为我工作（字面上，没有什么是模糊的我在链接的演示），它是一个kludge涉及两个画布元素。

我目前使用穷人的运动模糊技术，其基本上涉及将源图像一遍又一遍地重叠到画布上，并且在每次迭代之后丢弃与顶部背景相同的颜色的半透明矩形。

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

正如你所看到的，它适用于图像的边缘，但图像的内部部分不会结束模糊，它看起来可怕的图像具有部分透明度。 / p>

有没有更好的运动模糊技术？理想情况下，我想能够做像 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'; 
  

It's been asked before, but the accepted solution doesn't work for me (literally, nothing is blurring for me in the linked demo), and it's a bit of a kludge involving two canvas elements.

I'm currently using the "poor man's" motion blur technique, which basically involves blitting the source image to the canvas over and over, and dropping a semi-transparent rectangle the same color as the background on top after each iteration.

Here's a demo: http://jsfiddle.net/YmABP/

As you can see, it works nicely for the edges of the image, but the inner parts of the image don't end up blurring at all, and it looks terrible with images that have partial transparency.

Is there a better technique for motion blur? Ideally, I'd like to be able to do something like context.drawImage and pass an opacity parameter in, but AFAIK nothing like that exists. Some of the images may be hosted on third-party domains, so I won't have access to the individual pixel data. If it comes down to it, we can pull the images onto our server and then I could iterate over each pixel and draw it as a semi-transparent tiny rectangle, but this seems like overkill.

Does anyone know of a better motion blur solution, preferably one that I can use with remote images?

I doubt this matters, but for my current purposes, things only move upwards.

解决方案

Just set the globalAlpha property of the context before drawing your image repeatedly:

Demo: 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';​

这篇关于更好的画布运动模糊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！