HTML5实现了图像的压缩和重组动画特效。
也许你已经看过HTML5的图片粉碎机特效动画，实现的原理很简单，但是你不应该看到视频或者它可以被分解和重组。该HTML5动画是利用画布的相关特性来实现点击和断开视频的效果，在视频区域，点击鼠标可以使该区域的视频断开，从而在一段时间后，可以对破碎区域进行重组和恢复。视觉效果极佳。HTML代码
点击视频把它炸毁！
Javaｓｃｒｉｐｔ代码
VaR的视频；
VaR的副本；
无功copycanvas；
VaR的画；
无功tile_width = 32；
无功tile_height = 24；
无功tile_center_width = 16；
Var TILE_CENTER_HEIGHT = 12;
无功sourcerect = { x：0，Y 0，宽度：0，高度：0 }；
无功paintrect = { x：0，Y 0，宽度：1000，高度：600 }；
函数init（）{
视频document.getelementbyid（'sourcevid）；
copycanvas = document.getelementbyid（'sourcecopy）；
复制= copycanvas.getcontext（二维的）；
无功outputcanvas = document.getelementbyid（'output）；
画= outputcanvas.getcontext（二维的）；
（processframe setInterval（）
}
功能createtiles（）{
无功offsetx = tile_center_width +（paintrect。宽度里宽） / 2；
无功offsety = tile_center_height +（paintrect。高里高） / 2；
var＝0；
而（y＜里高度）{
变量x＝0；
而（x＜里宽）{
新平铺（）；
tile.videox = x；
tile.videoy = Y；
tile.originx = offsetx +X；
tile.originy = offsety + Y；
tile.currentx = tile.originx；
tile.currenty = tile.originy；
Tiles.push（瓦）；
x = tile_width；
}
y + = tile_height；
}
}
var =数学= pi 180；
无功randomjump = false；
var瓦片{ }；
var调试= false；
功能processframe（）{
如果（！IsNaN（视频。时间））{
如果（sourcerect.width = = 0）{
sourcerect = { x 0，y：0，宽度：video.videowidth，高度：视频videoheight }；
CreateTiles（）；
}
这是为了在开发时保持理智。
如果（randomjump）{
randomjump = false；
video.currenttime = Math.random（）* video.duration；
}
循环
如果（video.currenttime = =视频。时间）{
video.currenttime = 0；
}
}
无功debugstr = ；
复制瓷砖
copy.drawimage（视频0, 0）；
draw.clearrect（paintrect。X，Y，paintrect。paintrect.width，paintrect。高度）；
对于（var i = 0；i < tiles.length；i++）{
var平铺= { }；
如果（tile.force > 0.0001）{
扩展
tile.movex = tile.force；
tile.movey = tile.force；
tile.moverotation = tile.force；
tile.currentx = tile.movex；
tile.currenty = tile.movey；
tile.rotation = tile.moverotation；
tile.rotation = 360；
tile.force * = 0.9；
如果（tile.currentx = paintrect。宽度）{
tile.movex = - 1；
}
如果（tile.currenty = paintrect。高度）{
tile.movey = - 1；
}
} else if（tile.rotation = 0 | |！tile.currentx！= tile.originx | | tile.currenty！=瓦。originy）{
合同
无功diffx =（瓦。originX瓦。currentx）* 0.2；
无功diffy =（瓦。originy瓦。目前）* 0.2；
无功diffrot =（0-tile。旋转）* 0.2；
如果（Math.abs（diffx）＜0.5）{
tile.currentx = tile.originx；
其他{ }
tile.currentx = diffx；
}
如果（Math.abs（diffy）＜0.5）{
tile.currenty = tile.originy；
其他{ }
tile.currenty = diffy；
}
如果（Math.abs（diffrot）＜0.5）{
tile.rotation = 0；
其他{ }
tile.rotation = diffrot；
}
其他{ }
tile.force = 0；
}
Draw.save（）；
draw.translate（tile.currentx，砖。一般）；
draw.rotate（瓦。旋转* RAD）；
draw.drawimage（copycanvas，tile.videox，tile.videoy，tile_width，tile_height，tile_center_width -，- tile_center_height，tile_width，tile_height）；
draw.restore（）；
}
如果（调试）{
调试=假；
document.getelementbyid（'trace）.innerHTML = debugstr；
}
}
函数爆炸（x，y）{
对于（var i = 0；i < tiles.length；i++）{
var平铺= { }；
无功xdiff = tile.currentx-x；
无功ydiff = tile.currenty-y；
VaR的距离= math.sqrt（xdiff * xdiff + ydiff * ydiff）；
无功randrange = 220 +（）* Math.random（30）；
变量范围= randrange区；
无功力= 3 *（范围/ randrange）；
如果（强制>平铺，强制）{
tile.force =力；
VaR的弧度= math.atan2（ydiff，xdiff）；
tile.movex = math.cos（弧度）；
tile.movey = math.sin（弧度）；
tile.moverotation = 0.5-math.random（）；
}
}
Tiles.sort（zindexsort）；
processframe（）；
}
功能zindexsort（A，B）{
返回（a.force-b.force）；
}
功能dropbomb（EVT，obj）{
var POSx = 0；
VaR铭文= 0；
var = EVT window.event | |；
如果（e.pagex | | e.pagey）{
POSx = e.pagex；
波西= e.pagey；
} else if（e.clientx | | e.clienty）{
POSx = e.clientx + document.body.scrollleft + document.documentelement.scrollleft；
波西= e.clienty + document.body.scrolltop + document.documentelement.scrolltop；
}
无功canvasx = posx-obj.offsetleft；
无功canvasy = posy-obj.offsettop；
爆炸（canvasx，canvasy）；
}
函数平铺（）{
this.originx = 0；
this.originy = 0；
this.currentx = 0；
this.currenty = 0；
this.rotation = 0；
this.force = 0；
这个，z = 0；
本。Movex = 0；
这movey = 0；
this.moverotation = 0；
this.videox = 0；
this.videoy = 0；
}
*
所以
返回像素对象{、g、b、}
* /
函数getpixel（影像数据，x，y）{
VaR数据= imagedata.data；
VaR POS =（X + Y *数据。宽度）×4；
返回：数据{ } }，g：数据{ + } 1 }，b：数据{ + } 2 }，a：数据{ } + 3 } }
}
*
SetPixel
设置像素对象{、g、b、}
* /
函数SetPixel（影像数据，X，Y，像素）{
VaR数据= imagedata.data；
VaR POS =（X + Y *数据。宽度）×4；
数据{像素= R；
数据{ 1 }；
{ 2 } POS数据+ B =像素；
数据{ + } 3 } =像素；
}
*
copypixel
然后使用GetPixel更快/ SetPixel组合
* /
Function copyPixel (sImageData, SX, sy, dImageData, DX, Dy) {
var SPOS=（SX +系统* simagedata。宽度）×4；
无功达博士=（DX + DY * dimagedata。宽度）×4；
dimagedata。数据{达博士} = simagedata。数据{内}； / / R
dimagedata。数据{达博士+ 1 } = { simagedata。数据组合+ 1 }； / /克
dimagedata。数据{达博士+ 2 } = { simagedata。数据组合+ 2 }； / / B
dimagedata。数据{达博士+ 3 } = { simagedata。数据组合+ 3 }； / /
}
希望本文能帮助您学习Javaｓｃｒｉｐｔ程序设计。