Tutorial membuat teka-teki video dengan petua tutorial HTML5_html5

Beberapa hari yang lalu, rakan sekerja saya menunjukkan kepada saya kesan khas iaitu jigsaw puzzle Bezanya teka-teki tersebut adalah animasi. Dia minta saya buat DEMO, jadi saya buat sendiri buat seketika, dan memang tak susah pun. Ia mudah dilakukan dengan kanvas. Jadi catatan blog ini tidak sesuai untuk pakar. . . . Saya hanya menulisnya secara santai untuk keseronokan.
Rendering:

Sekurang-kurangnya apabila saya mula-mula melihat ini, saya fikir ia agak novel, jadi saya fikir untuk membuatnya untuk keseronokan Jika anda rasa poster itu keluar, sila berikan saya ibu jari

Tanpa berlengah lagi, mari kita mulakan dengan DEMO: Teka-teki Video (Anda mungkin perlu menunggu seketika untuk melihat kesannya. Saya membuat pautan video terus dari w3school. Anda boleh seret dan lepaskannya. Ia sangat mudah, dan mungkin masih mempunyai beberapa pepijat. Lagipun, ia hanya DEMO untuk berseronok. Jelaskan prinsipnya.) Perkara lain ialah melukis bingkai semasa video ke dalam kanvas nampaknya tidak disokong pada peranti mudah alih. . . . Sekurang-kurangnya saya melihatnya pada iPad saya dan mendapati bahawa saya tidak boleh melukis Jika sesiapa tahu cara menyelesaikan masalah ini, sila jawab untuk saya. Saya amat berterima kasih

Prinsip: Setiap kepingan teka-teki ialah kanvas dan kanvas luar skrin juga diperlukan. Mula-mula buat teg video

Salin kod

Kod tersebut adalah seperti berikut:

Dan sembunyikan video, dan kemudian lukiskan setiap bingkai ke dalam kanvas luar skrin apabila memainkan video (kanvas luar skrin ialah kanvas tersembunyi, digunakan untuk menyimpan data Kaedah penulisan adalah sangat mudah:

).

Salin kod

Kod adalah seperti berikut:

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

, hanya gunakan kaedah drawImage untuk melukisnya secara langsung. Mengapa menggunakan kanvas luar skrin dahulu kerana jika anda melukis terus setiap bingkai data ke dalam kanvas semua kepingan teka-teki pada masa yang sama, penyemak imbas akan ranap serta-merta. Jadi gunakan kanvas luar skrin sebagai penimbal. Mula-mula simpan data bingkai semasa ke kanvas, dan kemudian lukiskan kanvas ke dalam kanvas sebagai kepingan teka-teki. Melukis kanvas ke dalam kanvas juga sangat mudah, anda juga boleh menggunakan drawImage:

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

Kemudian. . . . Prinsipnya semudah itu. Saya ingin mengingatkan anda kemudian bahawa apabila menggunakan requestAnimationFrame untuk melintas bingkai, anda perlu mengehadkan kelajuan Sebagai contoh, seperti yang ditulis di bawah, saya mengambil setiap 30 milisaat ~50 milisaat. Jika terlalu rendah, penyemak imbas akan ranap dengan mudah. ​​Jika terlalu tinggi, ia akan menyebabkan penyemak imbas tersekat, video akan membeku

Salin kodKod tersebut adalah seperti berikut:

function animate(){
var newTime = new Date();
if(newTime - lastTime > 30){
lastTime = newTime;
ctx.drawImage(video , 0 , 0 , vw , vh);
kanvas. forEach(function(){
var ctx2 = this.cas.getContext('2d');
ctx2.drawImage(cs , -this.cols*this.w , -this.rows*this .h , vw , vh);
});
}
if("requestAnimationFrame" dalam tetingkap){
requestAnimationFrame(animate);
}
else if("webkitRequestAnimationFrame " dalam tetingkap ){
webkitRequestAnimationFrame(animate);
}
else if("msRequestAnimationFrame" dalam tetingkap){
msRequestAnimationFrame(animate);
}
else if("mozRequestAnimationFrame " dalam tetingkap ){
mozRequestAnimationFrame(animate);
}
}

Akhir sekali siarkan semua kod:

Salin kod Kod adalah seperti berikut:

<script><br> var video = document.getElementById("video") ;<br> var cs = document.getElementById("liping");<br> var ctx = cs.getContext('2d')<br> var rows = 3,<br> cols = 3,<br> cb = document.querySelector(".allCanvas"),<br> vw = 600,<br> vh = 400,<br> kanvas = [];</p> <p> function createCanvas(){<br> var num = rows*cols;<br> for(var i=0;i<cols;i ){<br> for(var j=0;j<rows;j ){<br> var canvas = vCanvas baharu(Math.random()*600, Math.random()*600 , vw/rows , vh/cols , j , i);<br> canvases.push(canvas);<br> }<br> }<br> }</p> <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 = 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> gelagat: 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> <p> Array.prototype.forEach = function(callback){<br> for(var i=0;i<this.length;i ){<br> callback.call(this[i]);<br> }<br> }</p> <p> var lastTime = 0;<br> function initAnimate(){<br> lastTime = new Date();<br> createCanvas();<br> animate();<br> }</p> <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" dalam tetingkap){<br> requestAnimationFrame(animate);<br> }<br> else if("webkitRequestAnimationFrame" dalam tetingkap){<br> webkitRequestAnimationFrame(animate);<br> }<br> else if("msRequestAnimationFrame" dalam tetingkap){<br> msRequestAnimationFrame(animate);<br> > else if("mozRequestAnimationFrame" dalam tetingkap){<br> mozRequestAnimationFrame(animate);<br> }<br> }</p> <p> video.play();<br> initAnimate();<br> </script>