如何用js在canvas中制作雾效果或模糊效果？

Question

我正在使用javascript和THREE.js 3d引擎，

我想做一个雾效果，

这是一个例子http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html

但它只支持WebGL，

那么有没有办法用javascript和canvas模拟fog effect或blur effect？

非常感谢。

Answer 1

Three.js 是 WebGL。您正在查看的示例是由制作three.js的同一个人创建的。

Three.js已经使用scene.fog支持雾。

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

---

下面的

适用于在Canvas中搜索雾/模糊寻找2D的人

有很多地方有implemented various blur effects。 pixastic库已经实现了很多这样的效果。

不过，雾是不同的东西。没有通用的定义，它实际上取决于你在寻找什么。一种方法是将画布的globalAlpha设置为0.3，然后在要显示“雾”的位置上绘制perlin noise。请注意，您最想要的噪音的颜色渐变对深灰色是透明的。