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