js 图片打碎_html5 canvas打碎的图片玻璃碎片特效

特效描述：html5canvas 打碎的图片 玻璃碎片特效。玻璃碎片特效

代码结构

1. 引入JS

2. HTML代码

var imageWidth = 768,

imageHeight = 485;

var vertices = [],

indices,

boxes = [];

var image,

fragments = [],

container = document.getElementById('container');

window.onload = function () {

image = document.getElementById('src_img');

triangulate();

makeBoxes();

makeFragments();

};

function triangulate() {

var x,

y,

dx = imageWidth / 8,

dy = imageHeight / 8,

offset = 0.5;

for (var i = 0; i <= imageWidth; i += dx) {

for (var j = 0; j <= imageHeight; j += dy) {

<