一款html5 canvas实现的图片玻璃碎片特效

swmozowtfl · *发表于* 2015-7-10 22:25:43

html5 canvas实现图片玻璃碎片特效，图片以玻璃碎片的形式出现到界面中，然后似玻璃被打碎的效果渐消息，效果很不错，喜欢的朋友可以参考下
今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中，然后似玻璃被打碎的效果渐消息。效果图如下：

登录/注册后可看大图

源码下载
html代码：
代码如下:
<img src=city_copy.jpg id=src_img class=hidden>
<div id=container style=-webkit-perspective: 500px;>
<div>
<script src=delaunay.js></script>
<script src=tweenmax.min.js></script>
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 = imagewidth / 8,
dy = imageheight / 8,
offset = 0.5;
for (var i = 0; i <= imagewidth; i += dx) {
for (var j = 0; j <= imageheight; j += dy) {
if (i && (i !== imagewidth)) x = i + randomrange(-dx * offset, dx * offset);
else x = i;
if (j && (j !== imageheight)) y = j + randomrange(-dy * offset, dy * offset);
else y = j;
vertices.push([x, y]);
}
}
indices = delaunay.triangulate(vertices);
}
function makeboxes() {
var p0, p1, p2,
xmin, xmax,
ymin, ymax;
for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
xmin = math.min(p0[0], p1[0], p2[0]);
xmax = math.max(p0[0], p1[0], p2[0]);
ymin = math.min(p0[1], p1[1], p2[1]);
ymax = math.max(p0[1], p1[1], p2[1]);
boxes.push({
x: xmin,
y: ymin,
w: xmax - xmin,
h: ymax - ymin
});
}
}
function makefragments() {
var p0, p1, p2,
box,
fragment;
tweenmax.set(container, { perspective: 500 });
var tl0 = new timelinemax({ repeat: -1 });
for (var i = 0; i < indices.length; i += 3) {
p0 = vertices[indices[i + 0]];
p1 = vertices[indices[i + 1]];
p2 = vertices[indices[i + 2]];
box = boxes[i / 3];
fragment = new fragment(p0, p1, p2, box);
var rx = randomrange(30, 60) * ((i % 2) ? 1 : -1);
var ry = randomrange(30, 60) * ((i % 2) ? -1 : 1);
var tl1 = new timelinemax();
tweenmax.set(fragment.canvas, {
y: box.y - 1000
});
tl1.to(fragment.canvas, randomrange(0.9, 1.1), {
y: box.y,
ease: back.easeout
});
tl1.to(fragment.canvas, 0.5, {
z: -100,
ease: cubic.easein,
delay: 0.4
});
tl1.to(fragment.canvas, randomrange(1, 1.2), {
rotationx: rx,
rotationy: ry,
z: 250,
alpha: 0,
ease: cubic.easeout
});
tl0.insert(tl1);
fragments.push(fragment);
container.appendchild(fragment.canvas);
}
}
function randomrange(min, max) {
return min + (max - min) * math.random();
}
fragment = function (v0, v1, v2, box) {
this.v0 = v0;
this.v1 = v1;
this.v2 = v2;
this.box = box;
this.canvas = document.createelement('canvas');
this.canvas.width = this.box.w;
this.canvas.height = this.box.h;
this.canvas.style.width = this.box.w + 'px';
this.canvas.style.height = this.box.h + 'px';
this.ctx = this.canvas.getcontext('2d');
tweenmax.set(this.canvas, {
x: this.box.x,
y: this.box.y
});
this.ctx.translate(-this.box.x, -this.box.y);
this.ctx.beginpath();
this.ctx.moveto(this.v0[0], this.v0[1]);
this.ctx.lineto(this.v1[0], this.v1[1]);
this.ctx.lineto(this.v2[0], this.v2[1]);
this.ctx.closepath();
this.ctx.clip();
this.ctx.drawimage(image, 0, 0);
}; //@ sourceurl=pen.js

更多网页制作信息请查看：网页制作

buingeEvineus · *发表于* 2015-11-7 22:47:02

感觉楼主说的很不错，我也很赞同

wwzcdenleclv · *发表于* 2015-11-7 22:47:02

挨骂也是幸福～～～

wwdu926a · *发表于* 2015-11-7 22:47:14

我刚来~~~嘿嘿~~此声明最终解释权归本人所有。

effoggikeftor · *发表于* 2015-11-7 22:47:17

看你快沉底了~~~~~~

gevaemaidovef · *发表于* 2015-11-7 22:47:58

这个论坛值得推荐，给了我们这么好的一个平台

tohme · *发表于* 2015-11-12 15:45:29

风沙就是由无数松散沙粒组成的，但是他们却又紧密的联系在一起，那股叱诧风云，横击而过的气概相信大家在作者的文章里也能体会的出来。如果有读者还不能体会的，请参考

wwdu926a · *发表于* 2015-11-12 15:45:38

成长可以说已经是很幸福的了。但在另一方面，作者也不是温室里的花*，只能作些鸳鸯蝴蝶的文章。在前面我已经说过了，这篇文章比形散神聚更胜一筹。诸位见过大风沙没有

Mqokjdvq · *发表于* 2015-11-12 15:45:45

感谢党和人民的关爱~~~

一款html5 canvas实现的图片玻璃碎片特效

猜你喜欢

回复|共 8 个

回复

快捷导航