canvas鼠标跟随立体线条交互动画效果代码-html代码-BFW代码库

canvas鼠标跟随立体线条交互动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas鼠标跟随立体线条交互动画效果代码，鼠标放上去移动试试看。

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

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

<head>

    <meta charset="UTF-8">

    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>


    <style>
        body {
          font-family: 'Open Sans', sans-serif;
          background-color:#10729c;
          background-image: -moz-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);
          background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);
          background-image: -o-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);
          background-image: -ms-radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);
          background-image: radial-gradient(50% 50%, ellipse cover, #10729c, #000030 100%);
        }
        header {
          background-color: rgba(0,0,0,0.2);
          position: absolute;
          height: 40px;
          width: 100%;
          left: 0px;
          top: 0px;
        }
        
        header h1 {
          text-transform: uppercase;
          margin-left: 20px;
          line-height: 25px;
          font-weight: 600;
          font-size: 12px;
          opacity: 0.8;
          color: #fff;
        }
    </style>



</head>

<body>

    <canvas id='world' width='500' height='500'></canvas>
    <header>
        <h1>Wiggle your mouse...</h1>
    </header>

    <script>
        var TWO_PI = Math.PI * 2;
    var HALF_PI = Math.PI * 0.5;
    var THICKNESS = 12;
    var LENGTH = 10;
    var STEP = 0.1;
    var FPS = 1000 / 60;
    
    function Particle(x, y, mass) {
    
        this.x = x || 0;
        this.y = y || 0;
        this.ox = this.x;
        this.oy = this.y;
        this.mass = mass || 1.0;
        this.massInv = 1.0 / this.mass;
        this.fixed = false;
    
        this.update = function (dt) {
            if (!this.fixed) {
                var fx = 0.0000;
                var fy = 0.0000;
                var tx = this.x,
                    ty = this.y;
    
                this.x += (this.x - this.ox) + fx * this.massInv * dt * dt;
                this.y += (this.y - this.oy) + fy * this.massInv * dt * dt;
                this.ox = tx;
                this.oy = ty;
            }
        };
    };
    
    function Spring(p1, p2, restLength, strength) {
    
        this.p1 = p1;
        this.p2 = p2;
        this.restLength = restLength || 10;
        this.strength = strength || 1.0;
    
        this.update = function (dt) {
    
            // Compute desired force
            var dx = p2.x - p1.x,
                dy = p2.y - p1.y,
                dd = Math.sqrt(dx * dx + dy * dy) + 0.0001,
                tf = (dd - this.restLength) / (dd * (p1.massInv + p2.massInv)) * this.strength,
                f;
    
            // Apply forces
            if (!p1.fixed) {
                f = tf * p1.massInv;
                p1.x += dx * f;
                p1.y += dy * f;
            }
    
            if (!p2.fixed) {
                f = -tf * p2.massInv;
                p2.x += dx * f;
                p2.y += dy * f;
            }
        }
    };
    
    function Sim() {
    
        this.particles = [];
        this.springs = [];
    
        this.tick = function (dt) {
    
            var i, n;
    
            for (i = 0, n = this.springs.length; i < n; ++i) {
                this.springs[i].update(dt);
            }
    
            for (i = 0, n = this.particles.length; i < n; ++i) {
                this.particles[i].update(dt);
            }
        }
    };
    
    // Create a new system
    var sim = new Sim(),
        old = new Date().getTime().........完整代码请登录后点击上方下载按钮下载查看