canvas粒子流喷射动画效果代码-html代码-BFW代码库

canvas粒子流喷射动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas粒子流喷射动画效果代码

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

<!DOCTYPE html>
<html>

<head>
    <title>JavaScript Particle System</title>
    <style>
        body,html {
            margin:0;
            padding:0;
        }
        canvas {
            background-color: black;
        }
    </style>
</head>

<body>
    <canvas></canvas>


    <script>
        "use strict";
        
        var maxParticles = 20000,
        particleSize = 1,
        emissionRate = 20,
        objectSize = 3; // drawSize of emitter/field
        
        
        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        function Particle(point, velocity, acceleration) {
          this.position = point || new Vector(0, 0);
          this.velocity = velocity || new Vector(0, 0);
          this.acceleration = acceleration || new Vector(0, 0);
        }
        
        Particle.prototype.submitToFields = function (fields) {
          // our starting acceleration this frame
          var totalAccelerationX = 0;
          var totalAccelerationY = 0;
        
          // for each passed field
          for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
        
            // find the distance between the particle and the field
            var vectorX = field.position.x - this.position.x;
            var vectorY = field.position.y - this.position.y;
        
            // calculate the force via MAGIC and HIGH SCHOOL SCIENCE!
            var force = field.mass / Math.pow(vectorX * vectorX + vectorY * vectorY, 1.5);
        
            // add to the total acceleration the force adjusted by distance
            totalAccelerationX += vectorX * force;
            totalAccelerationY += vectorY * force;
          }
        
          // update our particle's acceleration
          this.acceleration = new Vector(totalAccelerationX, totalAccelerationY);
        };
        
        Particle.prototype.move = function () {
          this.velocity.add(this.acceleration);
          this.position.add(this.velocity);
        };
        
        function Field(point, mass) {
          this.position = point;
          this.setMass(mass);
        }
        
        Field.prototype.setMass = function (mass) {
          this.mass = mass || 100;
          this.drawColor = mass < 0 ? "#f00" : ".........完整代码请登录后点击上方下载按钮下载查看