网页粒子背景插件 -Canvas-nest.js 指定具体位置展示

蔚落 2022-05-15 06:56 442阅读 0赞

原文地址：[https://blog.csdn.net/L1558198727/article/details/81121524][https_blog.csdn.net_L1558198727_article_details_81121524]

**Canvas-nest.js是一个非常好看的网页粒子背景插件，不需要依赖任何第三方库即可运行，提供额非常炫酷的背景。但是默认的情况下是对整个body标签进行添加的，现在我们想让粒子指定具体的位置改怎么做呢？**

**①我们首先打开Canvas-nest.js官方的实现**

(document.body, (f = document.getElementsByTagName("script"), {
            zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
            opacity: y.getAttribute("opacity"),
            color: y.getAttribute("color"),
            count: Number(y.getAttribute("count")) || 99
        }))

**在最后的地方对这个实现的函数进行了调用，这里的参数是body，效果如下**

![这里写图片描述][70]

**②我们可以在这个将document.body替换成其他的元素，例如**

**html代码**

<!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>CanvasDemo</title>
    </head>
    
    <body>
        <div id="cas" style="position: absolute;width: 200px;height: 200px; left: 200px; z-index: 99999;"></div>
        <script src="dist/canvas-nest.js" type="text/javascript" color="255,0,0" opacity="0.5" count="200" ></script>
    
    </body>
    </html>

**Canvas-nest.js中做如下修改**

(document.getElementById("cas"), (f = document.getElementsByTagName("script"), {
            zIndex: (y = f[f.length - 1]).getAttribute("zIndex"),
            opacity: y.getAttribute("opacity"),
            color: y.getAttribute("color"),
            count: Number(y.getAttribute("count")) || 99
        }))

**即可限制例子出现的位置**

![这里写图片描述][70 1]

[https_blog.csdn.net_L1558198727_article_details_81121524]: https://blog.csdn.net/L1558198727/article/details/81121524
[70]: /images/20220515/b59d3e5489a44442b63296d9cef3872f.png
[70 1]: /images/20220515/468b8ba2e1ab494aa24f640c5ba7439b.png