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

【问题标题】：how to make a fog effect or blur effect in canvas with js?如何用js在画布中制作雾效果或模糊效果？
【发布时间】：2012-01-21 00:09:07
【问题描述】：

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

我想做一个雾效果，

但它只支持WebGL，

那么有什么方法可以用javascript和canvas模拟fog effect或blur effect？

非常感谢。

【问题讨论】：

【解决方案1】：

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

Three.js 已经通过 scene.fog 支持雾化。

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

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

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

【讨论】：