canvas缩放图片,
今天要为大家带来一款html5画布实现的图片玻璃碎片特效。图片以玻璃碎片的形式出现到界面中，然后似玻璃被打碎的效果渐消息。效果图如下：
源码下载
超文本标记语言代码：复制代码代码如下：
img src= city _ copy。jpg id= src _ img class= hidden
div id= container style=-WebKit-perspective:500 px；
差异
script src=delaunay.js/script
script src= tweenmax。量滴js /脚本
射流研究…代码：复制代码代码如下：
//画布设置
可变图像宽度=768,
imageHeight=485
定义变量顶点=[],
指数，
box=[]；
变化图像，
碎片=[],
容器=文档。getelementbyid(“容器”)；
window.onload=function () {
图像=文档。getelementbyid( src _ img )；
三角化();
make boxes
制作碎片()；
};
函数三角化(){
var x，
y，
dx=图像宽度/8,
dy=图像高度/8,
偏移=0.5;
for(var I=0；我=图像宽度；i=dx) {
for(var j=0；j=imageHeightj=dy) {
如果（我（我！==图像宽度))x=I随机范围(-dx * offset，dx * offset)；
else x=I；
如果(j (j！==图像高度))y=j随机范围(-dy * offset，dy * offset)；
else y=j；
vertices.push([x，y])；
}
}
indices=Delaunay.triangulate(顶点);
}
函数makeBoxes
变量p0，p1，p2，
xMin，xMax，
yMin，yMax
for(var I=0；我。索引。长度；i=3) {
p0=顶点[索引[I 0]]；
p1=顶点[索引[我^ 1]]；
p2=顶点[索引【我^ 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])；
盒子。推({
x: xMin，
y: yMin，
w: xMax - xMin，
h: yMax - yMin
});
}
}
函数makeFragments() {
变量p0，p1，p2，
盒子，
碎片；
TweenMax.set(容器，{ perspective:500 })；
var tl0=新时间轴最大值({ repeat:-1 })；
for(var I=0；我。索引。长度；i=3) {
p0=顶点[索引[I 0]]；
p1=顶点[索引[我^ 1]]；
p2=顶点[索引【我^ 2】]；
box=box[I/3]；
片段=新片段(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 timeline max()；
TweenMax.set(fragment.canvas，{
y: box.y - 1000
});
tl1.to(fragment.canvas，randomRange(0.9，1.1)，{
y: box.y，
放松：后退。放松
});
tl1.to(fragment.canvas，0.5，{
z: -100，
ease:立方. easeIn
延迟：0.4
});
tl1.to(fragment.canvas，randomRange(1，1.2)，{
rotationX: rx，
旋转：ry，
z: 250，
阿尔法：0,
ease: Cubic.easeOut
});
tl0。插入(tl1)；
碎片.推送(片段);
容器。appendChild(片段。画布);
}
}
函数随机范围(最小值，最大值){
return min(max-min)* math。random()；
}
Fragment=function (v0，v1，v2，box) {
这个。v 0=v 0
this.v1=v1
this.v2=v2
这个盒子=盒子
这个。画布=文档。createelement(“canvas”)；
这个。画布。宽度=这个。盒子。w；
这个。画布。身高=这个。盒子。h；
这个。画布。风格。宽度=这个。盒子。w px
这个。画布。风格。身高=这个。盒子。h px
这个。CTX=这个。画布。获取上下文(“2d”)；
TweenMax.set(this.canvas，{
x: this.box.x，
y:这个。box.y
});
this.ctx.translate(-this.box.x，-this。盒子。y)；
这个。CTX。begin path()；
this.ctx.moveTo(this.v0[0]，this。v 0[1])；
this.ctx.lineTo(this.v1[0]，this。v1[1])；
this.ctx.lineTo(this.v2[0]，this。v2[1])；
这个。CTX。关闭路径()；
这个。CTX。clip()；
this.ctx.drawImage(image，0，0)；
};//@ sourceURL=pen.js
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。