今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息。效果图如下:
源码下载
html代码:
复制代码代码如下:
js代码:
复制代码代码如下:
// canvas settings
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 = imageWi