用HTML5制作视频拼图的教程_html5教程技巧_HTML/Xhtml_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML/Xhtml

    当前位置:主页 > 网页制作 > HTML/Xhtml >

    用HTML5制作视频拼图的教程_html5教程技巧

    时间:2019-08-13|栏目:HTML/Xhtml|点击:
  • 这篇文章主要介绍了用HTML5制作视频拼图的教程,主要用到了HTML5的Canvas API,需要的朋友可以参考下

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

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

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

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


    复制代码代码如下:</p><p><video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" style="display:block;position:absolute;top:-6000px;"></video></p><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" style="display:none"></canvas>
    </div>
    <video id="video" src="http://www.w3school.com.cn/example/html5/mov_bbb.mp4" width="600px" height="400px" controls="control" loop="loop" style="display:block;position:absolute;top:-6000px;"></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制作一个简单的弹力球游戏_html5教程技巧

    栏    目:HTML/Xhtml

    下一篇:简单介绍HTML5中的文件导入_html5教程技巧

    本文标题:用HTML5制作视频拼图的教程_html5教程技巧

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/20226.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号