前几天，同事给我看了一个特效，就是拼图。不同之处在于拼图是动画。他让我看看做个demo，我自己修了一会儿，真的不难。用画布很容易做到。所以这篇博文不适合专家阅读。 . . 一边写一边玩。
渲染：
至少我第一次看到这个的时候，觉得挺新奇的，就想着做个好玩的flash拼图游戏制作视频，觉得楼主出的小伙伴们请轻喷
话不多说，先上DEMO：视频拼图（可能需要一段时间才能看到效果，我直接从w3school做了一个视频链接。，拖拽一切都很简单，可能会有一些bug。毕竟只是一个demo来玩，只讲原理），还有一点，直接将视频的当前帧绘制到移动设备上的canvas中，貌似还不支持。 . 至少我用ipad看了一下，发现画不出来。如果哪位知道怎么解决这个问题flash拼图游戏制作视频，请小弟解答一下游戏动态，不甚感激
原理：每一块拼图都是一个画布，同时还需要一个离屏画布。先完成一个视频标签
代码如下：
并隐藏视频，然后在播放视频时将每一帧画到离屏画布上（离屏画布是隐藏的Canvas，用来保存数据），写法很简单：
代码如下：ctx.drawImage(video , 0 , 0 , vw , vh);
，直接使用drawImage方法绘制即可。为什么要先使用离屏画布，因为如果直接将每一帧数据同时绘制到所有拼图的画布上，浏览器会瞬间崩溃。所以使用屏幕外画布作为缓冲区。先将当前帧的数据保存到画布中，然后将画布作为拼图绘制到画布上。把canvas画成canvas也很简单，用drawImage也可以：
ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);
那么。 . . 原理就这么简单。后面我会提醒大家，在使用 requestAnimationFrame 循环帧时，一定要限制速度。例如，正如我在下面所写的，我每 30 毫秒取一次。建议取 30~50 毫秒。如果太低，浏览器很容易崩溃。如果太高如果视频卡住：
代码如下：
函数动画(){
var newTime = new Date();
if(newTime - lastTime > 30){
lastTime = newTime;
ctx.drawImage(视频, 0, 0, vw, vh);
p>
canvases.forEach(function(){
var ctx2 = this.cas.getContext('2d');
ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);
});
}
if ("requestAnimationFrame" in window){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame" in window){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" in window){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame" in window){
mozRequestAnimationFrame(animate);
}
}
最后贴出所有代码：
代码如下：
