html5图片破碎效果,HTML5 Canvas点击屏幕碎裂交互动画特效 |
您所在的位置:网站首页 › 屏幕碎裂特效 › html5图片破碎效果,HTML5 Canvas点击屏幕碎裂交互动画特效 |
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 function Chip(id, x, y) { this.id = id; this.x = x; this.y = y; this.cracks = []; this.cracksLength; this.interCracks = []; this.interCracksLength = Math.floor(Math.random() * 100) + 50; this.maxCrackGap = 45; } Chip.prototype.init = function() { var dir = 0, i = 0; while (dir < 360) { // Define direction angle for each crack if (i == 0) dir = Math.floor(Math.random() * this.maxCrackGap); else dir += Math.floor(Math.random() * this.maxCrackGap); // Create crack this.cracks[i] = new Crack(this.id, i, dir); if (i > 0) pieces[i - 1] = new Piece(this.id, i - 1, this.cracks[i - 1].dir, this.cracks[i].dir); i++; } // Last piece pieces[i - 1] = new Piece(this.id, i - 1, this.cracks[i - 1].dir, this.cracks[0].dir); this.cracksLength = i - 1; for (var u = 0; u < this.interCracksLength; u++) { var randomCrackId_1 = Math.floor(Math.random() * (this.cracksLength - 1)); var randomCrackId_2 = randomCrackId_1 + 1; this.interCracks[u] = new InterCrack(this.id, u, randomCrackId_1, randomCrackId_2); } }; Chip.prototype.die = function() { chips[this.id] = null; delete chips[this.id]; } /* Each chip has cracks */ function Crack(parentChip, id, dir) { this.parentChip = parentChip; this.id = id; this.dir = dir; this.distanceFromCenter = Math.floor(Math.random() * 10); this.x = chips[this.parentChip].x; this.y = chips[t |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |