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,效果如下
②我们可以在这个将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
}))
即可限制例子出现的位置