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