如何用HTML5制作视频拼图-创新互联
本篇内容介绍了“如何用HTML5制作视频拼图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联公司是一家朝气蓬勃的网站建设公司。公司专注于为企业提供信息化建设解决方案。从事网站开发,网站制作,网站设计,网站模板,微信公众号开发,软件开发,小程序制作,10余年建站对成都轻质隔墙板等多个方面,拥有多年的网站制作经验。几天前同事给我看了一个特效,是一个拼图游戏,不同的是,拼图里的是动画。他让我看下做个DEMO,于是就自己整了一会,也确实不难。用canvas很容易做。所以这篇博文不适合高手看。。。。就是随便写来玩玩的。
效果图:
至少我刚看到这个的时候觉得挺新颖的,所以才会想到做出来玩玩,觉得楼主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制作视频拼图-创新互联
标题来源:http://pwwzsj.com/article/eijji.html