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

一个基于html5 canvas绘制的网页背景效果,非常赞!如果需要 wordpress插件,在插件库搜索 canvas-nest 或者看看项目 canvas-nest-for-wp

效果预览:「访问

特性

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

使用

使用非常简单,感觉都没有必要写这一节内容。

将下面的代码插入到 <body> 和 </body> 之间.

<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

配置和配置项

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

例如:

<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>