HTML5_html5 튜토리얼 팁을 사용한 비디오 퍼즐 만들기 튜토리얼

얼마 전 동료가 특수 효과를 보여줬는데, 퍼즐이 애니메이션이라는 점이 다릅니다. DEMO를 만들어 달라고 해서 한동안 제가 직접 작업했는데, 사실 어렵지 않았습니다. 캔버스로 하면 쉽습니다. 따라서 이 블로그 게시물은 전문가에게 적합하지 않습니다. . . . 그냥 재미삼아 아무렇지도 않게 썼습니다.
렌더링:

적어도 처음 봤을 땐 참신한 것 같아서 재미삼아 만들어볼까 하는 생각도 들었습니다. 혹시 포스터가 나왔다고 생각되시면 좋아요 부탁드려요

더 이상 고민하지 말고 DEMO부터 시작해 보세요: 비디오 퍼즐(효과를 보려면 잠시 기다려야 할 수도 있습니다. w3school에서 직접 비디오 링크를 만들었습니다. 끌어다 놓을 수 있습니다. 매우 간단하고, 아직 버그가 있을 수 있습니다. 원리만 설명하면 됩니다.) 또 다른 점은 비디오의 현재 프레임을 캔버스에 직접 그리는 것이 모바일 장치에서는 지원되지 않는 것 같습니다. . . . 적어도 아이패드로 살펴보니 그림을 그릴 수 없었습니다. 혹시 이 문제를 해결하는 방법을 아시는 분 계시면 답변해 주시면 정말 감사하겠습니다.

원리: 각 퍼즐 조각은 캔버스이며, 오프스크린 캔버스도 필요합니다. 먼저 동영상 태그를 생성하세요

코드 복사

코드는 다음과 같습니다.

그리고 비디오를 숨긴 다음 비디오를 재생할 때 각 프레임을 오프스크린 캔버스에 그립니다(오프스크린 캔버스는 데이터를 저장하는 데 사용되는 숨겨진 캔버스입니다). 작성 방법은 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.

ctx.drawImage(video, 0, 0 , vw, vh);

drawImage 메소드를 사용하여 직접 그려보세요. 오프 스크린 캔버스를 먼저 사용하는 이유는 동시에 모든 퍼즐 조각의 캔버스에 각 데이터 프레임을 직접 그리면 브라우저가 즉시 중단되기 때문입니다. 따라서 오프스크린 캔버스를 버퍼로 사용하십시오. 먼저 현재 프레임의 데이터를 캔버스에 저장한 다음 캔버스를 퍼즐 조각으로 캔버스에 그립니다. 캔버스를 캔버스에 그리는 것도 매우 간단합니다. drawImage를 사용할 수도 있습니다:

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

그럼. . . . 원리는 그만큼 간단합니다. requestAnimationFrame을 사용하여 프레임을 반복할 때 속도를 제한해야 한다는 점을 나중에 알려드리고 싶습니다. 예를 들어 아래에 작성된 것처럼 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 " 창에서 ){
webkitRequestAnimationFrame(animate);
}
else if(창에서 "msRequestAnimationFrame"){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame " in window ){
mozRequestAnimationFrame(animate);
}
}

마지막으로 모든 코드를 게시합니다.

코드 복사

코드는 다음과 같습니다.

<script><br /> var video = document.getElementById("video") ;<br /> var cs = document.getElementById("liping");<br /> var ctx = cs.getContext('2d')<br /> var 행 = 3,<br /> cols = 3,<br /> cb = document.querySelector(".allCanvas"),<br /> vw = 600,<br /> vh = 400,<br /> canvases = []; <p> function createCanvas(){<br /> var num = 행*cols;<br /> for(var i=0;i<cols;i ){<br /> for(var j=0;j<rows;j ){<br /> var canvas = new vCanvas(Math.random()*600, Math.random()*600 , vw/rows , vh/cols , j , i);<br /> canvases.push(canvas);<br /> }<br /> }<br /> } <p> var vCanvas = function(x,y,w,h,cols,rows){<br /> this.x = x;<br /> this.y = y;<br /> this.w = w;<br /> this. h = h;<br /> this.cols = cols;<br /> this.rows = 행;<br /> this.creat();<br /> this.behavior();<br /> }<br /> vCanvas.prototype = {<br /> creat:function(){<br /> this.cas = document.createElement("canvas");<br /> cb.appendChild(this.cas);<br /> this.cas.className = "vcanvas ";<br /> this.cas.id = "vc_" (this.cols 1)*(this.rows 1);<br /> this.cas.style.left = this.x "px";<br /> this .cas.style.top = this.y "px";<br /> this.cas.width = this.w;<br /> this.cas.height = this.h;<br /> },<br /> 동작: function(){<br /> this.cas.onmousedown = function(e){<br /> e = e || window.event;<br /> var that = this;<br /> var om = {<br /> x:e.clientX,<br /> y:e.clientY<br /> }<br /> window.onmousemove = function(e ){<br /> e = e || window.event;<br /> var nm = {<br /> x:e.clientX,<br /> y:e.clientY<br /> }<br /> that.style.left =parseInt(that.style.left.replace ("px","")) (nm.x-om.x) "px";<br /> that.style.top =parseInt(that.style.top.replace("px","")) ( nm.y-om.y) "px";<br /> om = nm;<br /> }<br /> window.onmouseup = function(){<br /> this.onmousemove = null;<br /> }<br /> }<br /> }<br /> } <p> Array.prototype.forEach = function(callback){<br /> for(var i=0;i<this.length;i ){<br /> callback.call(this[i]);<br /> }<br /> } <p> var lastTime = 0;<br /> function initAnimate(){<br /> lastTime = new Date();<br /> createCanvas();<br /> animate();<br /> } <p> function animate(){<br /> var newTime = new Date();<br /> if(newTime - lastTime > 30){<br /> lastTime = newTime;<br /> ctx.drawImage(video , 0 , 0 , vw , vh);<br /> canvases.forEach(function(){<br /> var ctx2 = this.cas.getContext('2d');<br /> ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this.h , vw , vh);<br /> });<br /> }<br /> if("requestAnimationFrame" in window){<br /> requestAnimationFrame(animate);<br /> }<br /> else if(창의 "webkitRequestAnimationFrame"){<br /> webkitRequestAnimationFrame(animate);<br /> }<br /> else if(창의 "msRequestAnimationFrame"){<br /> msRequestAnimationFrame(animate);<br /> }<br /> else if(창의 "mozRequestAnimationFrame"){<br /> mozRequestAnimationFrame(animate);<br /> }<br /> } <p> video.play();<br /> initAnimate();<br /> </script>