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 - v1.x * v1.x - v1.y * v1.y)
			+ (v3.x - v1.x) * (v0.y - v1.y) * (v2.x * v2.x + v2.y * v2.y - v1.x * v1.x - v1.y * v1.y)
			+ (v0.x - v1.x) * (v2.y - v1.y) * (v3.x * v3.x + v3.y * v3.y - v1.x * v1.x - v1.y * v1.y)
			- (v2.x - v1.x) * (v0.y - v1.y) * (v3.x * v3.x + v3.y * v3.y - v1.x * v1.x - v1.y * v1.y)
			- (v3.x - v1.x) * (v2.y - v1.y) * (v0.x * v0.x + v0.y * v0.y - v1.x * v1.x - v1.y * v1.y)
			- (v0.x - v1.x) * (v3.y - v1.y) * (v2.x * v2.x + v2.y * v2.y - v1.x * v1.x - v1.y * v1.y);

		return circle_test >= 0;
	}

	function area(v0, v1, v2) {
		return (v1.x - v0.x) * (v2.y - v0.y) - (v2.x - v0.x) * (v1.y - v0.y);
	}

	function distSq(v0, v1) {
		return (v1.x - v0.x) * (v1.x - v0.x) + (v1.y - v0.y) * (v1.y - v0.y);
	}

	function colinear(v0, v1, v2) {
		return area(v1, v0, v2) === 0;
	}

	function isRightOf(v0, v1, v2) {
		return area(v0, v1, v2) > 0;
	}

	function isLeftOf(v0, v1, v2) {
		return area(v0, v1, v2) < 0;
	}

	function getQuadEdge() {
		var e = [new Edge(), new Edge(), new Edge(), new Edge()],
			i;

		for (i = 0; i < 4; i++) {
			e[i].rot = e[rot_map[i]];
			e[i].next = e[next_map[i]];
		}

		return e[0];
	}

	function deleteQuadEdge(e) {
		disconnect(e);
		[e, e.rot, e.sym(), e.iRot()].each(function(q) {
			delete q;
		});
	}

	function initDelaunay() {
		edges.each(function(e) {
			deleteQuadEdge(e);
		});
		edges = [];
		circumcenters = [];

		edgeVertices.each(function(v) {
			v.isInfinity = true;
		});

		edges[0] = getQuadEdge();
		edges[2] = getQuadEdge();
		edges[0].setOrgDest(edgeVertices[1], edgeVertices[2]);
		edges[2].setOrgDest(edgeVertices[1], edgeVertices[0]);
		edges[0].splice(edges[2]);
		edges[2] = edges[2].sym();
		edges[1] = connect(edges[0], edges[2]);
		edge = edges[0];
	}

	function inCosmic(v) {
		var cosmic = true;
		[edges[0], edges[1], edges[2]].each(function(e) {
			cosmic &= e.leftVertex(v);
		});
		return cosmic;
	}

	function locate(v) {
		if (edge.rightVertex(v)) {
			edge = edge.sym();
		}

		var i = 0;
		while (i++ < maxIterations && !v.equals(edge.org()) && !v.equals(edge.dest())) {
			if (!edge.oNext().rightVertex(v)) {
				edge = edge.oNext();
			} else if (!edge.dPrev().rig.........完整代码请登录后点击上方下载按钮下载查看