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

代码语言: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;
	};

.........完整代码请登录后点击上方下载按钮下载查看

网友评论0