how to make a fog effect or blur effect in canvas with js?

问题

I'm using javascript and THREE.js 3d engine,

and I want to do a fog effect,

here's an example http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html

but it only support WebGL,

so is there any way to simulate fog effect, or a blur effect with javascript and canvas?

thanks alot.

回答1:

Three.js is WebGL. The example you're looking at is created by the same person who made three.js.

Three.js supports fog already with scene.fog.

https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog

---

below is for people that searched for fog/blur in Canvas looking for 2D

There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.

Fog is something different, though. There isn't a universal definition and it really depends on what you're looking for. One way would be to set the globalAlpha of the canvas to something like 0.3 and then draw perlin noise on the locations that you want "fog" to appear. Note that the color gradient of the noise that you most likely want is transparent to dark gray.

来源：https://stackoverflow.com/questions/8938965/how-to-make-a-fog-effect-or-blur-effect-in-canvas-with-js