用Canvas做视频拼图
声明：本文为原创文章，如需转载，请注明来源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做视频拼图的更多相关文章
- HTML5之创新的视频拼图剖析式学习之二
昨天我们剖析了一下翻阅体验的实现.今天要剖析另外一个很有意思的效果——视频拼图. 网站中第一部分第二页<月熊的标志>是月熊志中互动性较强的一页,页面上会随机分布9块视频碎片,用户可以通过鼠 ...
- 我们能用canvas做什么？
什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过 ...
- 用canvas给视频图片添加特效
Canvas制作视频图片特效 1. Canvas介绍 1.1Canvas是html5上的一个画布标签,功能有点类似java的swing.可以在canvas上画线条 弧线, 文字 就是画布的功能. 具体 ...
- 用Canvas做动画
之前看过不少HTML5动画的书,讲解的是如何去做,对于其中的数学原理讲解的不详细,常有困惑.最近看的<HTML5+JavaScript 动画基础>这个是译本,Keith Peters曾写过 ...
- html5 canvas做的图表插件
用highchart的时候发现它是用svg来画图的,那么用canvas来做怎么样的. 以前做AS图表插件的时候,绘制图画主要用容器的Graphics对象来绘制,而canvas的context和Grap ...
- canvas做动画
一.绘制图片 ①加载图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- 原生js+canvas实现滑动拼图验证码
上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的.我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图.下面介绍具体步骤. 首先随便找一张图片渲染到c ...
- [Android]自己动手做个拼图游戏
目标 在做这个游戏之前,我们先定一些小目标列出来,一个一个的解决,这样,一个小游戏就不知不觉的完成啦.我们的目标如下: 游戏全屏,将图片拉伸成屏幕大小,并将其切成若干块. 将拼图块随机打乱,并保证其能 ...
- 使用 JavaScript 和 canvas 做精确的像素碰撞检测
原文地址:Pixel accurate collision detection with Javascript and Canvas 译者:nzbin 我正在开发一个需要再次使用碰撞检测的游戏.我通常 ...
随机推荐
- HTML学习笔记03-HTML基础
<!DOCTYPE HTML> <html> <head> <title> </title> </head> <body& ...
- Python3学习笔记19-继承和多态
在OOP程序设计中,当我们定义一个class的时候,可以从某个现有的class继承, 新的class称为子类(Subclass),而被继承的class称为基类.父类或超类(Base class.Sup ...
- C/C++杂记：虚函数的实现的基本原理
1. 概述 简单地说,每一个含有虚函数(无论是其本身的,还是继承而来的)的类都至少有一个与之对应的虚函数表,其中存放着该类所有的虚函数对应的函数指针.例: 其中: B的虚函数表中存放着B::foo和B ...
- Android之 看“马达”如何贯通Android系统 (从硬件设计 --> 驱动 --> HAL --> JNI --> Framework --> Application)
在Android 2.3(Gingerbread) 系统的时候,我写过一篇关于“Android 震动马达系统“的文章,当时的Linux内核还是2.6版本的.写那篇文章的目的,是想彻底的了解从硬件到驱动 ...
- 深度学习Bible学习笔记：第六章 深度前馈网络
第四章 数值计算(numerical calculation)和第五章 机器学习基础下去自己看. 一.深度前馈网络(Deep Feedfarward Network,DFN)概要: DFN:深度前馈网 ...
- 【gearman】学习笔记
学习资料:http://gearman.org/manual/ 1.Gearman是跨语言的,client和worker可以用不同的语言来实现 2.client与job server之间的交互称为ta ...
- 【linux】crontab失效
在linux上,crontab任务全部使用完整路径,但是任务无效. 检测crontab 服务是否启动, /etc/init.d/cron status /etc/init.d/cron restart
- 用switch语句判断月份，打印出当前月份所在的季节
var today=new Date(); var abc=today.getMonth(); switch (abc) { case 0: case 1: case 2: document.writ ...
- .net的架构模式
一:ADO.NET实现三层架构 不用三层的普通的查询写法: string sql = string.Format("select * from Studnet where StuName l ...
- Android使用帧动画内存溢出解决方法
Android使用帧动画内存溢出解决方法https://blog.csdn.net/daitu_liang/article/details/52336015https://blog.csdn.net/ ...