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