问题
I'm trying to use HTML5 canvas to make something like a motion blur effect and no success.
Basically what I'm trying to do is to take a photo and make it look like "fast forwarded", like when you take a picture and the person moved.
回答1:
There are several libraries for canvas that have implemented various blurring algorithms. EaselJS has implemented x- and y-axis blurring independently, as you can see in this sample.
All you might want is a x-axis blur from their libray.
回答2:
I got here with the opposite problem. I was trying to get rid of blur when scaling images. Fortunately, my problem leads to a simple solution for your problem. Also, the heavy lifting is performed by the API, so it's efficient.
If you draw your image to a smaller resolution canvas and then scale it up, you will get blurry images. I have tried this in a number of browsers, and it seems to work about the same. This question explores when and why browsers will use this blur behavior if you are concerned about the consistency of this technique across browsers and in future versions.
The image argument to canvas.drawImage accepts another canvas. When you draw the image to the intermediate canvas you could try using a small resolution along one axis. Then, scale it back to the original size and the blur effect should be primarily along one axis.
I'm not an image expert so I don't know how to optimally use motion blur(whether it should be along one axis etc), but with some fiddling and research, you may be able to use this technique to get the effects you want.
Hope this helps
来源：https://stackoverflow.com/questions/12324666/html5-canvas-motion-blur-effect