javascript - Better canvas motion blur - Stack Overflow

admin管理员组

文章数量:1341903

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: /

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 es 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.

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/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 es 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.

• javascript
• canvas
• motion-blur

Share Follow edited May 23, 2017 at 10:24 CommunityBot 111 silver badge asked May 21, 2012 at 22:21 Dagg NabbitDagg Nabbit 76.8k1919 gold badges114114 silver badges142142 bronze badges 1

• Here's what I eventually ended up with... to get the upwards motion blur, I start at the top with a fully opaque globalAlpha, and then draw the image one pixel lower each iteration, making globalAlpha more transparent with each step -- jsfiddle/zKx66/2 – Dagg Nabbit Commented May 22, 2012 at 1:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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

Demo: http://jsfiddle/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/tmp/gkhead-small.png';​

Have you tried EaselJS and its BlurFilter - try changing/animating blur in one direction (x or y).

本文标签： javascriptBetter canvas motion blurStack Overflow