twojs实现鼠标交互烟花喷射动画代码-html代码-BFW代码库

twojs实现鼠标交互烟花喷射动画代码

代码语言：html

所属分类：动画

代码描述：twojs实现鼠标交互烟花喷射动画代码，鼠标移动到上面，会出现慢动作。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/two.js"></script>
      <script  >
var two = new Two({
  type: Two.Types.canvas,
  fullscreen: true,
  autostart: true
}).appendTo(document.body);

two.renderer.domElement.style.background = '#111';
two.renderer.ctx.globalCompositeOperation = 'screen';

var amount = 120;

for (var j = 0; j < amount; j++) {

  var x = 0, y = 0;
  var speed = 120;
  var resolution = 4;
  var points = [];
  var vx = (Math.random()  - 0.5) * speed;
  var vy = - Math.random() * speed;

  for (var i = 0; i < resolution; i++) {
    points.push(new Two.Anchor(x, y));
    x += vx;
    y += vy;
    vy += speed / (resolution * 0.66);
  }

  var sparkline = two.makeCurve(points, true);
  sparkline.noFill();
  sparkline.linewidth = 8 * Math.random();
  sparkline.cap = 'round';
  sparkline.s.........完整代码请登录后点击上方下载按钮下载查看