html 画布粒子http://bl.ocks.org/ANTON072/raw/06262651e9b67934c52b/

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 画布粒子http://bl.ocks.org/ANTON072/raw/06262651e9b67934c52b/相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #000;
    }
  </style>
</head>
<body>

<script>
  window.onload = function() {
    // Creating the Canvas
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var particles = {};
    var particleIndex = 0;

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    canvas.id = 'motion';
    document.body.appendChild(canvas);

    context.fillStyle = 'black';
    context.fillRect(0, 0, canvas.width, canvas.height);

    var y_fourth = Math.floor(canvas.height / 4);
    var y_second_fourth = Math.floor(y_fourth * 2);

    function Particle() {
      var x = 0;
      var random_y = Math.floor(Math.random() * y_second_fourth + y_fourth) + 1;
//      console.log(random_x, random_y);
      this.x = x;
      this.y = random_y;
      this.vx = Math.random() * 5 - 2;
      this.vy = Math.random() * 2 - 1;
      this.gravity = 0;
      particleIndex++;
      particles[particleIndex] = this;
//      console.log(particles);
      this.id = particleIndex;
      this.size = Math.random() * 6 - 2;
      // 色相、彩度、明度、アルファ値
      // 明度をランダムにしている
      this.color = 'hsla(0, 0%,' + parseInt(Math.random() * 100, 0) + '%, 1)';
      this.color2 = 'hsla(360, 100%,' + parseInt(Math.random() * 100, 0) + '%, 1)';
      this.color3 = 'hsla(210, 100%,' + parseInt(Math.random() * 100, 0) + '%, 1)';
      // 恣意的な偏りのランダム値を生成するための変数
      this.color_selector = Math.random() * 150 - 1;
    }

    Particle.prototype.draw = function() {
      this.x += this.vx;
      this.y += this.vy;
      this.vy += this.gravity; // 揚力
      if (this.x > canvas.width || this.y > canvas.height) {
        delete particles[this.id]; // 削除するためにオブジェクトに保存
      }
//      console.log('a');
      if (this.color_selector < 30 && this.color_selector > 10) {
        context.fillStyle = this.color2;
//        context.fillStyle = 'red';
      }
      else if(this.color_selector < 10){
        context.fillStyle = this.color3;
//        context.fillStyle = 'blue';
      }
      else {
        // ここが一番多い
//        context.fillStyle = 'yellow';
        context.fillStyle = this.color;
      }
      context.fillRect(this.x, this.y, this.size, this.size);
    };

    setInterval(function () {
      context.fillStyle = 'black'; // 上塗り
      context.fillRect(0, 0, canvas.width, canvas.height);
      new Particle();
      for (var i in particles) {
        particles[i].draw();
      }
    }, 30);



  };
</script>
</body>
</html>

以上是关于html 画布粒子http://bl.ocks.org/ANTON072/raw/06262651e9b67934c52b/的主要内容，如果未能解决你的问题，请参考以下文章

html 画布粒子http://bl.ocks.org/ANTON072/raw/06262651e9b67934c52b/

画布粒子、碰撞和性能

如何修复画布 html5 中的性能滞后？

将现有的 defaultdict 输出为适合耀斑树状图的 JSON 格式？

粒子在mousemove上跟随光标（Javascript-画布）

ThreeJS功能解读——粒子和粒子系统