js实现canvas彩色粒子线条跟随鼠标运动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js实现canvas彩色粒子线条跟随鼠标运动动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        body {
          background-color:#000;
        }
        
        body, html, #container {
        				width:100%;
        				height:100%;
        				margin:0;
            padding:0;
        }
        
        #description {
          position:absolute;
          /*padding:8px;
          border-radius:8px;
          background-color:rgba(255,255,255,0.5);
          margin:8px;
          width:400px;*/
          color:#fff;
        }
        
        h1, p {
          margin:5px;
        }
    </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div id="description">
        <p>移动鼠标 ^^ 单击以进行 3D 旋转.</p>
    </div>
    <div id="container"><canvas id="canvas" ></canvas></div>
    <script>
        var KL = KL || {};
        
        KL.Particle = function(x, y, z, color, gV) {
        
        	this.v = new KL.V3(x, y, z);
        	this.oldV = new KL.V3(x, y, z);
        	this.gV = gV || null;
        	this.color = color || new KL.color();
        	this.velocity = new KL.V3();
        	this.length = 0;
        
        	this.move = function () {
        		//var v0 = ;
        		//this.velocity.multiply(0.5);
        		var dx = this.gV.x - this.v.x;
        		var dy = this.gV.y - this.v.y;
        		var dz = this.gV.z - this.v.z;
        		var d = Math.sqrt( dx*dx + dy*dy + dz*dz );
        		if (d<0.5) {
        			var rnd = Math.random()*3;
        			dx = this.velocity.x + rnd*dx/d;
        			dy = this.velocity.y + rnd*dy/d;
        			dz = this.velocity.z + rnd*dz/d;
        		}
        		else {
        			/*dx = minmax(this.velocity.x + 0.2*dx/d, -2, 2);
        			dy = minmax(this.velocity.y + 0.2*dy/d, -2, 2);
        			dz = minmax(this.velocity.z + 0.2*dz/d, -2, 2);*/
        			dx = this.velocity.x + 0.2*dx/d;
        			dy = this.velocity.y + 0.2*dy/d;
        			dz = this.velocity.z + 0.2*dz/d;
        		}
        		this.velocity.set(dx, dy, dz);
        		this.velocity.multiply(0.975);
        
        		//var velocity_value = this.velocity.length();
        		//this.color.setAlpha(0.5/velocity_value);
        		//this.color.setAlpha(d/8);
        
        		this.oldV.x = this.v.x;
        		this.oldV.y = this.v.y;
        		this.oldV.z = this.v.z;
        		this.oldV.px = this.v.px;
        		this.oldV.py = this.v.py;
        		this.v.add(this.velocity);
        	};
        
        	this.toString = function () {
        		return 'KL.Particle ( ' + this.v.x + ', ' + this.v.y + ', ' + this.v.z + ' )';
        	};
        }
        
        KL.Color = function( r, g, b, a ) {
        
        	this.getColor = function () {
        		if (this.a>=1) return 'rgb('+this.r+','+this.g+','+this.b+')';
        		else return 'rgba('+this.r+','+this.g+','+this.b+','+this.a+')';
        	};
        
        	this.r = r || 255;
        	this.g = g || 255;
        	this.b = b || 255;
        	this.a = a || 1;
        	this._str = this.getColor();
        	
        	this.setAlpha = function (a) {
        		this.a = minmax(a, 0, 1);
        		this._str = this.getColor();
        	};
        
        	this.toString = function () {
        		return this._str;
        	};
        }
        
        KL.V3 = function ( x, y, z ) {
        
        	this.x = x || 0;
        	this.y = y || 0;
        	this.z = z || 0;
        
        	this.px = 0;
        	this.py = 0;
        
        	this.set = function ( x, y, z ) {
        		this.x = x;
        		this.y = y;
        		this.z = z;
        
        		return this;
        	};
        
        	this.add = function ( v ) {
        		this.x+= v.x;
        		this.y+= v.y;
        		this.z+= v.z;
        	};
        
        	this.multiply = function ( n ) {
        		this.x*= n;
        		this.y*= n;
        		this.z*= n;
        	};
        
        	this.divide = function ( n ) {
        		this.x/= n;
        		this.y/= n;
        		this.z/= n;
        	};
        
        	this.length = function () {
        		return Math.sqrt( this.x*this.x + this.y*this.y + this.z*this.z );
        	};
        
        	this.toString = function () {
        		return 'KL.V3 ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
        	};
        };
        
        KL.M3 = function ( n11, n12, n13, n21, n22, n23, n31, n32, n33 ) {
        
        	this.n11 = n11 || 1; this.n12 = n12 || 0; this.n13 = n13 || 0;
        	this.n21 = n21 || 0; this.n22 = n22 || 1; this.n23 = n23 || 0;
        	this.n31 = n31 || 0; this.n32 = n32 || 0; this.n33 = n33 || 1;
        	
        	this.rot = function (rx, ry, rz) {
        		var cosx=Math.cos(rx), sinx=Math.sin(rx);
        		var cosy=Math.cos(ry), siny=Math.sin(ry);
        		var cosz=Math.cos(rz), sinz=Math.sin(rz);
        
        		this.n11 = cosz*cosy; 
        		this.n12 = sinz*cosy; 
        		this.n13 = -siny;
        
        		this.n21 = cosz*siny*sinx - sinz*cosx; 
        		this.n22 = sinz*siny*sinx + cosx*cosz; 
        		this.n23 = sinx*cosy;
        
        		this.n31 = cosz*siny*cosx + sinz*sinx; 
        		this.n32 = sinz*siny*cosx - cosz*sinx; 
        		this.n33 = cosx*cosy;
        	};
        
        	this.xV3 = function ( v ) {
        	
        		var vx = v.x,
        			vy = v.y,
        			vz = v.z;
        
        		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz;
        		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz;
        		v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz;
        
        		return v;
        	};
        
        	this.xParticle = function ( p ) {
        
        		var v = p.v,
        			oldV = p.oldV;
        		oldV.x = v.x;
        		oldV.y = v.y;
        		oldV.z = v.z;
        		oldV.px = v.px;
        		oldV.py = v.py;
        
        		this.xV3(v)
        
        		return p;
        	};
        };
        
        function minmax(x, min, max) {
        	if (x<min) return min;
        	else if (x>max) return max;
        	else return x;
        }
        
        (function(){
        	var NUM_BRANCHES = 32;
        	var NUM_PER_BRANCH = 16;
        	var NUM_PARTICLES = NUM_BRANCHES*NUM_PER_BRANCH;
        	var MAX = 20;
        
        	var $container = $('#container');
        	var CANVAS_WIDTH = $container.width();
        	var CANVAS_HEIGHT = $container.height();
        	var CANVAS_OX = CANVAS_WIDTH/2;
        	var CANVAS_OY = CANVAS_HEIGHT/2;
        
        	var CONTAINER_WIDTH = CANVAS_WIDTH;
        	var CONTAINER_HEIGHT = CANVAS_HEIGHT;
        	var CONTAINER_OX = CANVAS_OX;
        	var CONTAINER_OY = CANVAS_OY;
        	
        	var PI2 = Math.PI*2;
        
        	var container, canvas, context;
        
        	var particles = [];
        	var rotMatrix = new KL.M3();
   .........完整代码请登录后点击上方下载按钮下载查看