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(angl.........完整代码请登录后点击上方下载按钮下载查看

网友评论0