黑洞穿梭粒子流动画效果

代码语言: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) };


   .........完整代码请登录后点击上方下载按钮下载查看

网友评论0