声明：本文为原创文章，如需转载，请注明来源WAxes，谢谢！

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

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

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

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

<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>

并且把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 = [];

         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);

                 }

             }

         }

         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;

                     }

                 }

             }

         }

         Array.prototype.forEach = function(callback){

             for(var i=0;i<this.length;i++){

                 callback.call(this[i]);

             }

         }

         var lastTime = 0;

         function initAnimate(){

             lastTime = new Date();

             createCanvas();

             animate();

         }

         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);

             }

         }

         video.play();

         initAnimate();

     </script>

 </body>

 </html>

用Canvas做视频拼图的更多相关文章

  1. HTML5之创新的视频拼图剖析式学习之二

    昨天我们剖析了一下翻阅体验的实现.今天要剖析另外一个很有意思的效果——视频拼图. 网站中第一部分第二页<月熊的标志>是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠 ...

  2. 我们能用canvas做什么？

    什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...

  3. 用canvas给视频图片添加特效

    Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...

  4. 用Canvas做动画

    之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...

  5. html5 canvas做的图表插件

    用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...

  6. canvas做动画

    一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  7. 原生js+canvas实现滑动拼图验证码

    上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到c ...

  8. [Android]自己动手做个拼图游戏

    目标 在做这个游戏之前,我们先定一些小目标列出来,一个一个的解决,这样,一个小游戏就不知不觉的完成啦.我们的目标如下: 游戏全屏,将图片拉伸成屏幕大小,并将其切成若干块. 将拼图块随机打乱,并保证其能 ...

  9. 使用 JavaScript 和 canvas 做精确的像素碰撞检测

    原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...

随机推荐

  1. Python3学习笔记07-List

    Python有6个序列的内置类型,但最常见的是列表和元 序列都可以进行的操作包括索引,切片,加,乘,检查成员. 此外,Python已经内置确定序列的长度以及确定最大和最小的元素的方法. 创建一个列表, ...

  2. Ajax jsonp 跨域请求实例

    跨域请求 JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求:它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题. $. ...

  3. Github简介

    先附上下载地址 http://windows.github.com/ git-scm.com是版本控制软件Git的官方网站. Git和GitHub的区别 Git是一个分布式的版本控制系统,与SVN类似 ...

  4. 『转载』hadoop2.x常用端口、定义方法及默认端口

    『转载』hadoop2.x常用端口.定义方法及默认端口 1.问题导读 DataNode的http服务的端口.ipc服务的端口分别是哪个? NameNode的http服务的端口.ipc服务的端口分别是哪 ...

  5. sqlserver 日志传送

    可以使用日志传送将事务日志不间断地从一个数据库(主数据库)发送到另一个数据库(辅助数据库).不间断地备份主数据库中的事务日志,然后将它们复制并还原到辅助数据库,这将使辅助数据库与主数据库基本保持同步. ...

  6. centos下httpd-2.4的编译安装

    httpd-2.4编译安装     依赖于更高版本的apr和apr-util      apr 全称  apache portable runtime 首先停用低版本的httpd服务 service ...

  7. 强大的Js树型控件Dtree使用详解

    http://www.lmwlove.com/ac/ID868 在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree.从官方页面你能知道:dt ...

  8. .net core定时任务

    1.HangFire HangFire官网 Hangfire项目实践分享 :  讲解的比较详细 2.Quartz.NET https://www.cnblogs.com/best/p/7658573. ...

  9. InterruptedException 异常

    当一个方法后面声明可能会抛出InterruptedException 异常时,说明该方法是可能会花一点时间,但是可以取消的方法. 抛InterruptedException的代表方法有: 1. jav ...

  10. VIM 键盘符号

    :h key-notation //查询键盘符号说明<>> 等于shift + > % 是跳到对应的括号 x 是删除当前字符,即右括号 '' 是跳回左括号 x 删除左括号