CanvasParticles.js 实现粒子线条动画背景

2020-08-07 11:26:48 背景

CanvasParticles

html5 canvas 实现网页背景粒子效果

引入js文件

<script type="text/javascript" src="canvas-particle.js"></script>

调用html

<div id="mydiv"></div>

配置动画
配置,调用CanvasParticle函数,传入配置参数即可,如果不配置则用默认配置

window.onload = function() {
  //配置
  var config = {
      vx: 4,    //小球x轴速度,正为右,负为左
      vy: 4,    //小球y轴速度
      height: 2,    //小球高宽,其实为正方形,所以不宜太大
      width: 2,
      count: 300,        //点个数
      color: "49, 49, 49",     //点颜色
      stroke: "71,71,71",         //线条颜色
      dist: 6000,     //点吸附距离
      e_dist: 20000,     //鼠标吸附加速距离
      max_conn: 30     //点到点最大连接数
  }

  //调用
  CanvasParticle(config);
}
  • 上一篇:没有了
  • 下一篇:没有了

评论