黑洞穿梭粒子流动画效果-html代码-BFW代码库

黑洞穿梭粒子流动画效果

代码语言：html

所属分类：粒子

代码描述：黑洞穿梭粒子流动画效果

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

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

<style>
body{ margin: 0; overflow: hidden; }
#c{ background: #000; }
</style>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
</head>
<body translate="no">
<canvas id="c"></canvas>

<script >
var holeSize = 100; // size of the black hole.
var rotationDistance = 200; // distance of black hole from canvas center.
var rotationSpeed = 1; // speed of black hole rotation.
var spawnCount = 20; // the amount of stars to spawn every frame.
var rotationStep = 37;

// ---------------------------------------------

var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
stars = [],
m = {},
r = 0,
accel = 1.01,
accel2 = 0.001,
ratio = window.devicePixelRatio || 1,
spawnPos = 0,
randomize = true;

canvas.width = window.innerWidth * ratio;
canvas.height = window.innerHeight * ratio;

m.x = null;
m.y = null;

ctx.strokeStyle = '#fff';
ctx.translate(0.5, 0.5);

// create stars
function createStars(n) {

  if (m.x === null) return;

  for (var i = 0; i < n; i++) {
    var shape = {
      x: m.x,
      y: m.y,
      r: 1,
      speed: 1,
      accel: accel,
      accel2: accel2,
      angle: randomize ? Math.random() * 360 : spawnPos };


    if (!randomize) spawnPos += rotationStep;

    var vel = {
      x: holeSize * Math.cos(shape.angle * Math.PI / 180),
      y: holeSize * Math.sin(shape.angle * Math.PI / 180) };


    shape.x += vel.x;
    shape.y += vel.y;

    stars.push(shape);
  }
}

function render() {
  createStars(spawnCount);

  var bench = [];
  // ctx.save();
  // ctx.fillStyle = 'rgba(0,0,0,0.5)';
  // ctx.fillRect(0, 0, canvas.width, canvas.height);
  // ctx.restore();

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  r += rotationSpeed;
  if (r < 360) {
    m = { x: canvas.width / 2, y: canvas.height / 2, angle: r };

    var targetAngle = m.angle * Math.PI / 180;

    m.x += rotationDistance * Math.cos(targetAngle);
    m.y += rotationDistance * Math.sin(targetAngle);
  } else {
    r = 0;
  }

  while (stars.length) {
    var star = stars.pop();

    var vel = {
      x: star.speed * Math.cos(star.angle * Math.PI / 180),
      y: star.speed * Math.sin(star.ang.........完整代码请登录后点击上方下载按钮下载查看