您现在的位置是：网站首页> 编程资料编程资料

用HTML5制作视频拼图的教程HTML5拖拽API经典实例详解HTML5 拖拽批量上传文件的示例代码html5 canvas绘制可拖拽的3D立体文字效果源码html5 canvas绘制的可拖拽全屏3D地球旋转动画特效源码HTML5+Three.js WebGL实现的月球发光着色与拖拽动画效果源码HTML5拖拽的简单实例html5实现的网格图片鼠标拖动拼图游戏源码html5版canvas自由拼图实例HTML5拖拽功能实现的拼图游戏

2023-10-14 595人已围观

简介 这篇文章主要介绍了用HTML5制作视频拼图的教程,主要用到了HTML5的Canvas API,需要的朋友可以参考下

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

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

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

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


复制代码
代码如下:

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


复制代码
代码如下:
ctx.drawImage(video , 0 , 0 , vw , vh);

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

ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);

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

 

复制代码
代码如下:

function animate(){
var newTime = new Date();
if(newTime - lastTime > 30){
lastTime = newTime;
ctx.drawImage(video , 0 , 0 , vw , vh);
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);
}
}


最后贴出所有代码： 
复制代码
代码如下:






视频拼图










上一篇：HTML5有哪些新特征HTML5新特性之type=file文件上传功能HTML5新特性之语义化标签HTML5新特性之用SVG绘制微信logo 整理HTML5的一些新特性与Canvas的常用属性基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作HTML5 history新特性pushState、replaceState及两者的区别 Html5新特性用canvas标签画多条直线附效果截图html5声频audio和视频video等新特性详细说明html5新特性与用法大全

下一篇：举例详解HTML5中使用JSON格式提交表单基于HTML5的WebGL实现json和echarts图表展现在同一个界面Html5中localStorage存储JSON数据并读取JSON数据的实现方法HTML5中使用json对象的实例代码

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网