canvas炫酷网页背景效果
原创    xingfu2017    发表于:2018-01-09 16:00:07
  阅读 :200   收藏   编辑

一个基于html5 canvas绘制的网页背景效果

在线效果:

http://git.hust.cc/canvas-nest.js/

github地址

https://github.com/hustcc/canvas-nest.js

js地址:

https://github.com/hustcc/canvas-nest.js/blob/master/src/canvas-nest.js

特性

  • 不依赖任何框架或者内库,比如不依赖 jQuery,使用原生的 javascript。
  • 非常小,只有1.6 kb,如果开启 gzip,可以更小。
  • 非常容易实现,配置简单,即使你不是web开发者,也能简单搞定

建议在 </body>标签上方加入以下代码

<html>
<head>
    ...
</head>
<body>
    ...
    ...
    ...
    <script type="text/javascript" src="canvas-nest.min.js的path"></script>
</body>
</html>

配置

  • color: 线条颜色, 默认: ‘0,0,0’ ;三个数字分别为(R,G,B),注意用,分割
  • opacity: 线条透明度(0~1), 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1
评论
条评论

推荐阅读