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