视频拼图片怎么做,怎么拼图片和视频教程
前几天同事给我看了一个特效，是拼图。不同的是拼图是动画的。他让我做一个演示，所以我自己做了一段时间。真的不难。用画布很容易做到。所以这篇博文不适合高手。只是为了好玩。
效果图：
至少我第一次看到这个的时候觉得还挺新奇的，就想到了做着玩。我觉得楼主出来的哥们请轻喷。
话不多说，先上DEMO:视频拼图(可能需要一段时间才能看到效果。我直接从w3school做了一个视频链接。拖着做什么都很简单，可能会有一些bug。毕竟只是为了好玩的试玩。只谈原理)。还有一点，移动设备上似乎不支持将视频的当前帧直接绘制到画布上。至少我用ipad看了一下，发现画不出来。如果有知道怎么解决这个问题的大牛，请为小弟解答一下。我非常感激。
原理：每个拼图都是一块画布，还需要一块离屏画布。首先是整个视频标签。
复制代码如下：/ppvideoid= video src= 3358www.w3school.com.cn/example/HTML5/mov _ BBB . MP4 width= 600 px height= 400 px controls= control loop= loop style= display。位置：绝对；顶部：-6000像素；/视频/pp
并且隐藏视频，然后在播放视频的时候把每一帧都画到离屏画布里(离屏画布就是隐藏的画布，用来保存数据)。写作方法很简单：
复制代码如下：ctx.drawImage(video，0，0，vw，VH)；
，直接用drawImage方法画就行了。为什么先用屏下画布？因为如果直接把每一帧数据同时绘制到所有拼图块的画布上，浏览器会瞬间崩溃。所以用一个离屏画布作为缓冲。先将当前帧的数据保存到canvas中，然后将canvas绘制到canvas中作为拼图块。把canvas画成canvas也很简单，用drawImage也可以做到：
ctx2.drawImage(cs，-this.cols*this.w，-this.rows*this.h，vw，VH)；
然后。原理就是这么简单。之后我要提醒你，使用requestAnimationFrame取帧的时候要限制速度。例如，如下所述，我每30毫秒拍摄一帧。建议用时30~50毫秒。如果太低，浏览器很容易崩溃。如果太高，视频会卡住：
复制代码如下：
函数animate(){
var new time=new Date()；
if(newTime - lastTime 30){
lastTime=newTime
ctx.drawImage(视频，0，0，vw，VH)；
canvas . foreach(function(){
var CT x2=this . cas . get context( 2d )；
ctx2.drawImage(cs，-this.cols*this.w，-this.rows*this.h，vw，VH)；
});
}
if(窗口中的“requestAnimationFrame ”){
requestAnimationFrame(animate)；
}
else if(窗口中的“webkitRequestAnimationFrame ”){
webkitRequestAnimationFrame(animate)；
}
else if(窗口中的“msRequestAnimationFrame ”){
msRequestAnimationFrame(animate)；
}
else if(窗口中的“mozRequestAnimationFrame ”){
mozRequestAnimationFrame(animate)；
}
}
最后，贴出所有代码：复制代码代码如下：
！ DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD
html xmlns= http://www . w3 . org/1999/XHTML XML:lang= en
头
meta http-equiv= Content-Type Content= text/html；charset=UTF-8
风格
正文{边距：0；填充：0；}。所有画布{
位置：相对；
边距：50px自动；
宽度：600px
}。vcanvas{
位置：绝对；
显示：块；
边框：1px纯色；
}
/风格
标题视频拼图/标题
/头
身体
div class=" all canvas "
canvas id= Liping width= 600 height= 400 style= display:none /canvas
/div
视频id= video src= http://www。w3school。com。cn/example/html 5/mov _ BBB。MP4 width= 600 px height= 400 px controls= control loop= loop style= display:block；位置：绝对；顶部：-6000像素；/视频
脚本
var视频=文档。getelementbyid( video )；
var cs=文档。getelementbyid( Liping )；
var ctx=cs.getContext(2d )
可变行数=3,
cols=3，
cb=document.querySelector( .allCanvas))，
vw=600，
vh=400，
画布=[];/pp函数createCanvas(){
var num=rows * cols
for(var I=0；icolsi ){
for(var j=0；jrowsj ){
var canvas=new vcan vas(math . random()* 600，数学。random()* 600，vw/rows，vh/cols，j，I)；
canvases.push(画布);
}
}
}/pp var vCanvas=function(x，y，w，h，cols，rows){
this.x=x
this.y=y
this.w=w
this.h=h
this.cols=cols
this.rows=rows
这个。creat()；
这个。行为()；
}
vCanvas.prototype={
creat:function(){
这个。cas=文档。createelement(“canvas”)；
CB。appendchild(这个。cas)；
这个。中科院。class name=" vcan vas
这个。中科院。id= VC _ (这个。第1栏)*(这个。第1行)；
这个。中科院。风格。左=这个。x px
这个。中科院。风格。top=这个。y px
这个。中科院。宽度=这个。w；
这个。中科院。身高=这个。h；
},
行为：函数(){
这个。中科院。onmousedown=function(e){
e=e window.event
变那个=这个
var om={
x:e.clientX，
y:e客户
}
窗户。onmousemove=function(e){
e=e window.event
var nm={
x:e.clientX，
y:e客户
}
那个。风格。left=parse int(that。风格。向左。替换( px ， )(nm。x-om。x) px ；
那个。风格。top=parse int(that。风格。顶端。替换( px ， )(nm。你好。y) px ；
om=nm
}
window.onmouseup=function(){
this.onmousemove=null
}
}
}
}/PP数组。原型。foreach=function(回调){
for(var I=0；ithis.lengthi)
回电。调用(这个[我])；
}
}/PP var last time=0；
函数initAnimate(){
上次=新日期();
创建画布()；
animate()；
}/pp函数animate(){
var new time=new Date()；
if(newTime - lastTime 30){
lastTime=newTime
ctx.drawImage(视频，0，0，vw，VH)；
画布。foreach(function(){
var CT x2=this。中科院。获取上下文(“2d”)；
ctx2.drawImage(cs，-this.cols*this.w，-this.rows*this.h，vw，VH)；
});
}
如果(窗口中的" requestAnimationFrame "){
requestAnimationFrame(animate)；
}
else if(窗口中的" webkitRequestAnimationFrame "){
webkitRequestAnimationFrame(animate)；
}
else if(窗口中的" msRequestAnimationFrame "){
msRequestAnimationFrame(animate)；
}
else if(窗口中的" mozRequestAnimationFrame "){
mozRequestAnimationFrame(animate)；
}
}/PP视频。play()；
init animate()；
/脚本
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。