js实现canvas彩色圆点粒子发光运动效果代码-html代码-BFW代码库

js实现canvas彩色圆点粒子发光运动效果代码

代码语言：html

所属分类：粒子

代码描述：js实现canvas彩色圆点粒子发光运动效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    canvas {
      flex-shrink: 0;
      image-rendering: -moz-crisp-edges;
      image-rendering: -webkit-crisp-edges;
      image-rendering: pixelated;
      object-fit: contain;
    }
    </style>

</head>

<body>

    <script>
        const PI = Math.PI,
          TWO_PI = Math.PI * 2;
    
    Util = {};
    Util.timeStamp = function() {
    	return window.performance.now();
    };
    Util.random = function(min, max) {
      return min + Math.random() * (max - min);
    };
    Util.map = function(a, b, c, d, e) {
      return (a - b) / (c - b) * (e - d) + d;
    };
    Util.lerp = function(value1, value2, amount) {
      return value1 + (value2 - value1) * amount;
    };
    Util.array2D = function(tableau, array_width){
    	var result = [];
    	for (var i = 0; i < tableau.length; i += array_width) result.push(tableau.slice(i, i + array_width));
    	return result;
    };
    Util.threeAngle = function(p0,p1,p2){
        var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
            a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
            c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
        return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
    }
    
    Tween = {};
    Tween.linear = function(currentTime, start, degreeOfChange, duration) {
      return degreeOfChange * currentTime / duration + start;
    };
    Tween.easeInOutQuad = function(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t + b;
      t--;
      return -c / 2 * (t * (t - 2) - 1) + b;
    };
    Tween.easeInOutExpo = function(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
      t--;
      return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
    };
    
    class Vector{
    	constructor(x,y){
    		this.x = x || 0;
    		this.y = y || 0;
    	}
    	set(x,y){
    		this.x = x;
    		this.y = y;
    	}
      reset(){
    		this.x = 0;
    		this.y = 0;
      }
    	fromAngle(angle){
    		let x = Math.cos(angle),
    			y = Math.sin(angle);
    		return new Vector(x,y);
    	}
    	add(vector){
    		this.x += vector.x;
    		this.y += vector.y;
    	}
    	sub(vector){
    		this.x -= vector.x;
    		this.y -= vector.y;
    	}
    	mult(scalar){
    		this.x *= scalar;
    		this.y *= scalar;
    	}
    	div(scalar){
    		this.x /= scalar;
    		this.y /= scalar;
    	}
    	dot(vector){
    		return vector.x * this.x + vector.y * this.y;
    	}
    	limit(limit_value){
    		if(this.mag() > limit_value) this.setMag(limit_value);
    	}
    	mag(){
    		return Math.hypot(this.x,this.y);
    	}
    	setMag(new_mag){
    		if(this.mag() > 0){
    			this.normalize();
    		}else{
    			this.x = 1;
    			this.y = 0;
    		}
    		this.mult(new_mag);
    	}
    	normalize(){
    		let mag = this.mag();
    		if(mag > 0){
    			this.x /= mag;
    			this.y /= mag;
    		}
    	}
    	heading(){
    		return Math.atan2(this.x,this.y);
    	}
    	setHeading(angle){
    		let mag = this.mag();
    		this.x = Math.cos(angle) * mag;
    		this.y = Math.sin(angle) * mag;
    	}
    	dist(vector){
    		return new Vector(this.x - vector.x,this.y - vector.y).mag();
    	}.........完整代码请登录后点击上方下载按钮下载查看