js实现canvas太空黑洞蚕食星体粒子动画效果代码-html代码-BFW代码库

js实现canvas太空黑洞蚕食星体粒子动画效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas太空黑洞蚕食星体粒子动画效果代码

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

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

<head>

  <meta charset="UTF-8">



</head>

<body >
  

  
      <script>
/* 
Space particles. Created with TypeScript.

Uncomment...

    this.ctx.shadowBlur = 20;
    this.ctx.shadowColor = "#fff";
    
...if you want to see more space in space. But remember - it's slow.
@Amay 2015


"Spaaaaaace!" 
- Portal 2 
*/


var Space = function () {
  function Space() {
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.particles = [];
    this.ratio = window.innerHeight < 400 ? 0.6 : 1;
    this.r = 120;
    this.counter = 0;
  }
  Space.prototype.init = function () {
    this.createElement();
    this.loop();
  };
  Space.prototype.createElement = function () {
    var scale = this.ratio;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.canvas.style.width = '100%';
    this.canvas.style.background = 'rgb(0, 0, 0)';
    this.ctx.transform(scale, 0, 0, -scale, this.canvas.width / 2, this.canvas.height / 2);
    document.body.appendChild(this.canvas);
    for (var i = 0; i < 450; i++) {
      this.createParticle();
    }
  };
  Space.prototype.createParticle = function () {
    this.particles.push({
      color: Math.random() > 0.5 ? "rgba(255, 255, 255, 1)" : "rgba(255, 255, 255, 0.4)",
      radius: Math.random() * 5,
      x: Math.cos(Math.random().........完整代码请登录后点击上方下载按钮下载查看