在前端开发中，我们经常需要添加噪声效果来增强页面的表现力。而 noisy.js 是一种使用 JavaScript 在页面上添加随机噪声背景的工具，它支持多种噪声类型的生成，包括圆形噪声、水滴噪声、雪花噪声等等。使用 noisy.js 可以为我们的页面添加出色的视觉效果，提高用户的体验感。
安装
你可以通过以下命令来安装 noisy.js：
npm install noisy.js
或者直接将 noisy.js 文件下载到本地，在 HTML 文件中引入：
<script src="path/to/noisy.js"></script>
生成噪声
在 noisy.js 中，我们需要通过调用 Noisy 类来生成噪声背景。在调用 Noisy 构造函数时，我们可以传递一些参数来控制噪声的生成：
-- -------------------- ---- ------- --- ------ - ---------------------------------- --- ----- - --- ------------------------------ - ------ ---- ------- ---- ----- --------- -------- ---- ---------- -- ------------ --------- --- -----------------
上述代码中，我们首先获取到一个 canvas 元素，并通过 canvas.getContext('2d') 方法来获取 canvas 上下文对象。然后我们创建了一个 Noisy 实例，并传递给它一个参数对象来描述噪声的生成参数。在这里，我们指定了噪声背景的宽度和高度，生成的噪声类型为圆形，透明度为 0.3，边线宽度为 1，边线颜色为黑色。接着我们调用了 generate 方法来生成噪声背景，将其渲染到 canvas 上。
添加噪声
一旦我们生成了噪声背景，我们需要将其展示在页面上。我们可以通过插入一个绝对定位的 div 元素，并使用 CSS 中的 background-image 属性来显示噪声背景：
<div id="noise"></div>
#noise {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8," + encodeURIComponent(noisy.svg()));
}在上述代码中，我们创建了一个绝对定位的 div 元素，并设置其的宽度和高度为 100%。接着我们使用了 encodeURIComponent 方法和 svg 函数来获取一个含有噪声背景的 SVG 图像，并通过 background-image 属性来将其展示到页面上。
示例代码
以下是一个完整的 noisy.js 示例代码，可以生成一个随机圆形噪声背景，并将其展示在页面上：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------------
-------
------ -
--------- ---------
---- --
----- --
------ -----
------- -----
----------------- --------------------------------------- - ---------------------------------
-
--------
-------
------
------- ----------- -------------------------------
---- -----------------
--------
--- ------ - ----------------------------------
--- ----- - --- ------------------------------ -
------ ------------------
------- -------------------
----- ---------
-------- ----
---------- --
------------ ---------
---
-----------------
---------
------- --------------------------------
-------
-------结语
通过阅读本文，你已经了解了如何使用 noisy.js 来生成随机噪声背景，并将其展示在页面上。在实际开发中，你可以根据具体的需求来调整参数，生成不同类型的噪声效果。此外，你还可以通过修改生成的 SVG 图像来进一步调整噪声效果、添加颜色等等。希望本文能对你在前端开发中添加噪声效果有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597b81e8991b448d7053