如何用HTML5制作视频拼图

发布时间:2021-08-02 16:07:48 作者:chen
来源:亿速云 阅读:149

本篇内容介绍了“如何用HTML5制作视频拼图”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

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

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

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

代码如下:

<p><video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" ></video></p>

并且把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);            }        }


最后贴出所有代码: 

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        body{margin:0;padding:0;}
        .allCanvas{
            position: relative;
            margin:50px auto;
            width:600px;
        }
        .vcanvas{
            position: absolute;
            display: block;
            border: 1px solid;
        }
    </style>
    <title>视频拼图</title>
</head>
<body>
    <div class="allCanvas">
        <canvas id="liping" width="600" height="400" ></canvas>
    </div>
    <video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" ></video>
    <script>
        var video = document.getElementById("video");
        var cs = document.getElementById("liping");
        var ctx = cs.getContext('2d')
        var rows = 3,
            cols = 3,
            cb = document.querySelector(".allCanvas"),
            vw = 600,
            vh = 400,
            canvases = [];</p>
<p>        function createCanvas(){
            var num = rows*cols;
            for(var i=0;i<cols;i++){
                for(var j=0;j<rows;j++){
                    var canvas = new vCanvas(Math.random()*600, Math.random()*600 , vw/rows , vh/cols , j , i);
                    canvases.push(canvas);
                }
            }
        }</p>
<p>        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;
            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;
            },
            behavior:function(){
                this.cas.onmousedown = function(e){
                    e = e || window.event;
                    var that = this;
                    var om = {
                        x:e.clientX,
                        y:e.clientY
                    }
                    window.onmousemove = function(e){
                        e = e || window.event;
                        var nm = {
                            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(var i=0;i<this.length;i++){
                callback.call(this[i]);
            }
        }</p>
<p>        var lastTime = 0;
        function initAnimate(){
            lastTime = new Date();
            createCanvas();
            animate();
        }</p>
<p>        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);
            }
        }</p>
<p>        video.play();
        initAnimate();
    </script>
</body>
</html>

“如何用HTML5制作视频拼图”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. Java制作拼图游戏
  2. 如何用HTML5制作贪吃蛇游戏

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html5

上一篇:sqlserver 中怎么管理用户权限

下一篇:sqlserver中distinct如何使用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》