用HTML5制作视频拼图的教程

几天前同事给我看了一个特效，是一个拼图游戏，不同的是，拼图里的是动画。他让我看下做个DEMO，于是就自己自己一整会，也确实不难。用帆布很容易做。所以这篇博文不适合高手看。。。。就是随便写来玩玩的。

至少我刚看到这个的时候觉得挺新颖的，所以才会想到做出来玩玩，觉得楼主out的哥们请轻喷

不多说，先上DEMO：视频拼图（或许要等一会才能看到效果，我是直接在w3school那里搞了个视频链接过来的，可以什么的都做的很简单，或许还有些bug，毕竟就只是做一个DEMO玩玩而已，说说原理就行了），还有一点，直接把视频的当前帧画到画布中在移动设备上好像还不支持。。。至少我用ipad看了一下，发现画不上去，如果有知道肿么解决这个问题的大牛请为小弟解答一下，不甚感激

原理：每个块拼图就是一个画布，同时还需要一个离屏画布。先整一个视频标签

复制代码

代码如下：

</p><p><videoid=“video”src=“http://www.w3school.com.cn/example/html5/mov_bbb.mp4”width=“600px”height=“400px”controls=“控制“loop=”loop“style=”display：block;position：absolute;top：-6000px;“></video></p><p>

并且把视频隐藏掉，然后播放视频的时候把每个帧都画到离屏canvas中（离屏canvas就是隐藏了的canvas，用于保存数据），写法很简单：

复制代码

代码如下：

ctx.drawImage（video，0，0，vw，vh）;

为何要先用离屏画布呢，因为如果直接把每一帧数据同时画到所有拼图块的画布中，浏览器会瞬间崩掉。所以用一个离屏画布作为缓冲。先把当前帧的数据保存到画布，然后再将画布画到作为拼图块的画布中。将画布画到画布中也很简单，也是用drawImage就可以搞定：

ctx2.drawImage（cs，-this.cols*this.w，-this.rows*this.h，vw，vh）;

然后。。。。原理就这么简单，之后提醒一点，用requestAnimationFrame循环取帧时，要限一下速，例如下面所写的，我是每30秒取一次，推荐30〜50毫秒，太低浏览器容易崩溃，太高的话视频出现卡帧现象了：

复制代码

代码如下：

函数animate（）{varnewTime=newDate（）;if（newTime-lastTime>30）{lastTime=newTime;ctx.drawImage（video，0，0，vw，vh）;canvases.forEach（function（）{varctx2=this.cas.getContext（'2d'）;ctx2.drawImage（cs，-this.cols*this.w，-this.rows*this.h，vw，vh）;}）;}if（“requestAnimationFrame”inwindow）{requestAnimationFrame（animate）;}elseif（窗口中的“webkitRequestAnimationFrame”）{webkitRequestAnimationFrame（animate）;}

否则if（“msRequestAnimationFrame”inwindow）{msRequestAnimationFrame（animate）;}elseif（“mozRequestAnimationFrame”inwindow）{mozRequestAnimationFrame（animate）;}}

最后贴出所有代码：

复制代码

代码如下：

<！DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><htmlxmlns=“http：//www.w3.org/1999/xhtml“xml：lang=”zh-CN“><head><metahttp-equiv=”Content-Type“content=”text/html;charset=UTF-8“><style>body{margin：0;padding：0;}.allCanvas{位置：相对；margin：50px自动;宽度：600px;}.vcanvas{位置：绝对；显示：块；边框：1px实线；}</style><title>视频拼图<

<divclass=“allCanvas”><canvasid=“liping”width=“600”height=“400”style=“display：none”></canvas></div><videoid=“video”src=“http://www.w3school.com.cn/example/html5/mov_bbb.mp4”width=“600px”height=“400px”controls=“control”loop=“loop”style=“display：block;position：absolute;top：-6000px;“></video><script>varvideo=document.getElementById（”video“）;varcs=document.getElementById（“liping”）;varctx=cs.getContext（'2d'）var行=3，cols=3，cb=文档。

varnum=rows*cols;for（vari=0;i<cols;i++）{for（varj=0;j<rows;j++）{varcanvas=newvCanvas（Math.random（）*600，Math.random（）*600，vw/rows，vh/cols，j，i）;canvases.push（canvas）;}}}</p><p>varvCanvas=function（x，y，w，h，cols，rows）{this.x=x;this.y=y;this.w=w;this.h=h;this.cols=cols;this.rows=行；this.creat（）;this.behavior（）;}vCanvas.prototype={

creat：function（）{this.cas=document.createElement（“canvas”）;cb.appendChild（this.cas）;this.cas.className=“vcanvas”;this.cas.id=“vc_”+（this.cols+1）*（this.rows+1）;this.cas.style.left=this.x+“px”;this.cas.style.top=this.y+“px”;this.cas.width=this.w;this.cas.height=this.h;}，行为：function（）{this.cas.onmousedown=function（e）{e=e||window.event;varthat=this;varom={

x：e.clientX，y：e.clientY}window.onmousemove=function（e）{e=e||window.event;varnm={x：e.clientX，y：e.clientY}that.style.left=parseInt（that.style.left.replace（“px”，“”））+（nm.x-om.x）+“px”;that.style.top=parseInt（that.style.top.replace（“px”，“”））+（nm.y-om.y）+“px”;om=nm；}window.onmouseup=function（）{

this.onmousemove=null;}}}}</p><p>Array.prototype.forEach=function（callback）{for（vari=0;i<this.length;i++）{callback.call（this[i]）;}}</p><p>varlastTime=0;函数initAnimate（）{lastTime=newDate（）;createCanvas（）;animate（）;}</p><p>函数animate（）{varnewTime=newDate（）;if（newTime-lastTime>30）{lastTime=newTime;

ctx.drawImage（video，0，0，vw，vh）;canvases.forEach（function（）{varctx2=this.cas.getContext（'2d'）;ctx2.drawImage（cs，-this.cols*this.w，-this.rows*this.h，vw，vh）;}）;}if（“requestAnimationFrame”inwindow）{requestAnimationFrame（animate）;}elseif（窗口中的“webkitRequestAnimationFrame”）{webkitRequestAnimationFrame（animate）;}elseif（“”msRequestAnimationFrame“inwindow）{msRequestAnimationFrame（animate）;}

否则if（“mozRequestAnimationFrame”inwindow）{mozRequestAnimationFrame（animate）;}}</p><p>video.play（）;initAnimate（）;</script></body></html>

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h61065.shtml