javascript - 如何模糊 Canvas 元素的一部分？

Question

如何模糊 Canvas 元素的一部分？

我正在使用名为 three.js 的 JavaScript 3D 库。 Three.js 是一个使 WebGL 更简单的库。他们在那里提供了一些模糊和景深示例，但我认为这些是我不熟悉的后期处理效果。是否有一种“简单”的方法可以从 Canvas 元素的顶部模糊例如 60px？

三.js: http://threejs.org/

Answer 1

您可以克隆 Canvas 元素并向 css 添加模糊效果。

canvas = document.getElementById("canvas")
clone = background.cloneNode("canvas");
document.getElementById("blurred").appendChild(clone);

类似于 this