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

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

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