canvas泰森多边形动画效果

代码语言:html

所属分类:背景

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	color: #fff;
	background-color: #000;
}

canvas {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
	-webkit-user-select: none;
	user-select: none;
	cursor: pointer;
}
</style>

</head>
<body translate="no">
<canvas></canvas>

<script >
// Voronoi by @neave

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
  setTimeout(callback, 1000 / 60);
};

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

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

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

网友评论0