js实现canvas菱形变换背景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：js实现canvas菱形变换背景动画效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<style>
body {margin: 0;}
</style>

</head>
<body style="overflow:hidden">

<div></div>

<script>

var Voronoi = Voronoi || {};

(function(Voronoi) {

        // requestAnimationFrame shim
        var i = 0,
                lastTime = 0,
                vendors = ['ms', 'moz', 'webkit', 'o'];

        while (i < vendors.length && !window.requestAnimationFrame) {
                window.requestAnimationFrame = window[vendors[i] + 'RequestAnimationFrame'];
                window.cancelAnimationFrame = window[vendors[i] + 'CancelAnimationFrame'] || window[vendors[i] + 'CancelRequestAnimationFrame'];
                i++;
        }

        if (!window.requestAnimationFrame) {
                window.requestAnimationFrame = function(callback, element) {
                        var currTime = new Date().getTime(),
                                timeToCall = Math.max(0, 1000 / 60 - currTime + lastTime),
                                id = setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);

                        lastTime = currTime + timeToCall;
                        return id;
                };
        }

        if (!window.cancelAnimationFrame) {
                window.cancelAnimationFrame = function(id) {
                        clearTimeout(id);
                };
        }

        Array.prototype.each = function(f) {
                var i = this.length;
                while (i--) {
                        f(this[i]);
                }
        };

        function Edge() {
                this.data;
                this.next;
                this.rot;
        }

        Edge.prototype.splice = function(e) {
                var e1 = this.next.rot,
                        e2 = e.next.rot,
                        e3 = this.next;

                this.next = e.next;
                e.next = e3;

                e3 = e1.next;
                e1.next = e2.next;
                e2.next = e3;
        };

        Edge.prototype.swap = function() {
                var e0 = this.oPrev(),
                        e1 = this.sym().oPrev();

                this.splice(e0);
                this.sym().splice(e1);
                this.splice(e0.lNext());
                this.sym().splice(e1.lNext());
                this.setOrg(e0.dest());
                this.setDest(e1.dest());
        };

        Edge.prototype.sym = function() {
                return this.rot.rot;
        };

        Edge.prototype.iRot = function() {
                return this.rot.rot.rot;
        };

        Edge.prototype.org = function(v) {
                return this.data;
        };

        Edge.prototype.setOrg = function(v) {
                this.data = v;
        };

        Edge.prototype.dest = function() {
                return this.rot.rot.data;
        };

        Edge.prototype.setDest = function(v) {
                this.rot.rot.data = v;
        };

        Edge.prototype.setOrgDest = function(o, d) {
                this.setOrg(o);
                this.setDest(d);
        };

        Edge.prototype.left = function() {
                return this.rot.rot.rot.data;
        };

        Edge.prototype.setLeft = function(v) {
                this.rot.rot.rot.data = v;
        };

        Edge.prototype.right = function() {
                return this.rot.data;
        };

        Edge.prototype.setRight = function(v) {
                this.rot.data = v;
        };

        Edge.prototype.oNext = function() {
                return this.next;
        };

        Edge.prototype.rNext = function() {
                return this.rot.next.rot.rot.rot;
        };

        Edge.prototype.dNext = function() {
                return this.rot.rot.next.rot.rot;
        };

        Edge.prototype.lNext = function() {
                return this.rot.rot.rot.next.rot;
        };

        Edge.prototype.oPrev = function() {
                return this.rot.next.rot;
        };

        Edge.prototype.rPrev = function() {
                return this.rot.rot.next;
        };

        Edge.prototype.dPrev = function() {
                return this.rot.rot.rot.next.rot.rot.rot;
        };

        Edge.prototype.lPrev = function() {
                return this.next.rot.rot;
        };

        Edge.prototype.leftVertex = function(v) {
                return isLeftOf(v, this.org(), this.dest());
        };

        Edge.prototype.rightVertex = function(v) {
                return isRightOf(v, this.org(), this.dest());
        };

        Edge.prototype.colinearVertex = function(v) {
                return colinear(v, this.org(), this.dest());
        };


        function Vertex(x, y) {
                this.x = x;
                this.y = y;
                this.vx = 0;
                this.vy = 0;
                this.cell = 0;
                this.isInfinity = false;
        }

        Vertex.prototype.equals = function(v) {
                return this.x === v.x && this.y === v.y;
        };


        var context,
                viewHomeDiv,
                viewOuterDiv,
                boundary = 25,
                canvasWidth,
                canvasHeight,
                totalVertices = 70,
                maxSpeed = 3,
                vertices = [],
                r,
                g,
                b,
                ri,
                gi,
                bi,
                loopID = 0,
                rot_map = [1, 2, 3, 0],
                next_map = [0, 3, 2, 1],
                edge,
                edges = [],
                circumcenters = [],
                edgeVertices = [new Vertex(0, -5000), new Vertex(-10000, 5000), new Vertex(10000, 5000)],
                maxIterations = 200,
    followDist = 200,
                stirDist = 50,
    mouseX,
    mouseY,
    oldMouseX = 0,
    oldMouseY = 0;

        function inCircle(v0, v1, v2, v3) {
                var circle_test = (v2.x - v1.x) * (v3.y - v1.y) * (v0.x * v0.x + v0.y * v0.y.........完整代码请登录后点击上方下载按钮下载查看