用HTML5制做视頻拼图的实例教程

日期:2021-02-24 类型:科技新闻 

关键词:微信小程序商城,免费微信小程序,小程序设计软件,小程序生成平台,可查询的小程序

几日前朋友给我看了1个殊效,是1个拼图手机游戏,不一样的是,拼图里的是动漫。他让我看下做个DEMO,因而就自身整了1会,也的确不难。用canvas很非常容易做。因此这篇博文不合适大神看。。。。便是随意写来玩玩的。
实际效果图:

最少我刚看到这个的情况下感觉挺新颖的,因此才会想起做出来玩玩,感觉楼主out的哥们请轻喷

  很少说,先上DEMO:视頻拼图  (也许要等1会才可以看到实际效果,我是立即在w3school那里搞了个视頻连接过来的,拖拽甚么的都做的很简易,也许也有些bug,终究就只是做1个DEMO玩玩罢了,说说基本原理就可以了),也有1点,立即把视頻确当前帧画到canvas中在挪动机器设备上仿佛还不适用。。。最少我用ipad看了1下,发现画不上去,假如有了解肿么处理这难题的大牛请为小弟解答1下,不甚感谢

  基本原理:每块拼图便是1个canvas,另外还必须1个离屏canvas。先整1个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:⑹000px;"></video></p> <p>

而且把video掩藏掉,随后播发视頻的情况下把每帧都画到离屏canvas中(离屏canvas便是掩藏了的canvas,用于储存数据信息),写法很简易:


拷贝编码
编码以下:
ctx.drawImage(video , 0 , 0 , vw , vh);

,立即用drawImage方式画上去就可以了。为什么要先用离屏canvas呢,由于假如立即把每帧数据信息另外画到全部拼图块的canvas中,访问器会一瞬间崩掉。因此用1个离屏canvas做为缓存。先把当今帧的数据信息储存到canvas,随后再将canvas画到做为拼图块的canvas中。将canvas画到canvas中也很简易,也是用drawImage便可以搞定:

ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);

随后。。。。基本原理就这么简易,以后提示1点,用requestAnimationFrame循环系统取帧时,要限1下速,比如下面所写的,我是每30毫秒取1次,强烈推荐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⑻">
<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:⑹000px;"></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>