Tutorial zum Erstellen von Videorätseln mit HTML5_html5-Tutorial-Tipps

Vor ein paar Tagen hat mir mein Kollege einen Spezialeffekt gezeigt, bei dem es sich um ein Puzzle handelt. Der Unterschied besteht darin, dass es sich bei dem Puzzle um eine Animation handelt. Er bat mich, eine DEMO zu machen, also habe ich eine Weile selbst daran gearbeitet, und es war tatsächlich nicht schwierig. Mit Leinwand geht das ganz einfach. Daher ist dieser Blogbeitrag nicht für Experten geeignet. . . . Ich habe es einfach nur zum Spaß geschrieben.
Rendering:

Zumindest als ich das zum ersten Mal sah, dachte ich, dass es ziemlich neu ist, also dachte ich daran, es zum Spaß zu machen. Wenn du denkst, dass das Poster draußen ist, gib mir bitte einen Daumen nach oben

Beginnen wir ohne weitere Umschweife mit DEMO: Video-Puzzle (Möglicherweise müssen Sie eine Weile warten, bis Sie den Effekt sehen. Ich habe einen Videolink direkt aus w3school erstellt. Sie können ihn per Drag-and-Drop ziehen. Es ist (sehr einfach und kann immer noch einige Fehler enthalten. Schließlich handelt es sich nur um eine DEMO zum Spaß.) Ein weiterer Punkt ist, dass das direkte Zeichnen des aktuellen Frames des Videos in die Leinwand anscheinend nicht unterstützt wird . . . Zumindest habe ich es auf meinem iPad angeschaut und festgestellt, dass ich nicht zeichnen kann. Wenn jemand weiß, wie man dieses Problem löst, wäre ich sehr dankbar

Prinzip: Jedes Puzzleteil ist eine Leinwand, und es ist auch eine Leinwand außerhalb des Bildschirms erforderlich. Erstellen Sie zunächst ein Video-Tag

Code kopierenDer Code lautet wie folgt:

Und blenden Sie das Video aus und zeichnen Sie dann jedes Bild in die Off-Screen-Leinwand, wenn Sie das Video abspielen (Off-Screen-Leinwand ist die verborgene Leinwand, die zum Speichern von Daten verwendet wird:

).

Code kopierenDer Code lautet wie folgt:

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

, verwenden Sie einfach die Methode drawImage, um es direkt zu zeichnen. Warum zuerst eine Leinwand außerhalb des Bildschirms verwenden? Denn wenn Sie jeden Datenrahmen gleichzeitig direkt in die Leinwand aller Puzzleteile zeichnen, stürzt der Browser sofort ab. Verwenden Sie also eine Leinwand außerhalb des Bildschirms als Puffer. Speichern Sie zunächst die Daten des aktuellen Frames auf der Leinwand und zeichnen Sie dann die Leinwand als Puzzleteil in die Leinwand. Das Zeichnen von Leinwand in Leinwand ist ebenfalls sehr einfach. Sie können auch drawImage verwenden:

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

Dann. . . . Das Prinzip ist so einfach. Ich möchte Sie später daran erinnern, dass Sie die Geschwindigkeit begrenzen müssen, wenn Sie requestAnimationFrame zum Durchlaufen verwenden. Wie unten beschrieben, wird empfohlen, alle 30 Millisekunden abzurufen ~50 Millisekunden. Wenn der Wert zu niedrig ist, stürzt der Browser ab. Wenn das Video hängen bleibt:

Code kopierenDer Code lautet wie folgt:

Funktion animate(){
var newTime = new Date();
if(newTime - lastTime > 30){
lastTime = newTime;
ctx.drawImage(video , 0 , 0 , vw , vh);
Leinwände. 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 " im Fenster ){
mozRequestAnimationFrame(animate);
}
}

Schließlich den gesamten Code posten:

Code kopieren Der Code lautet wie folgt:

<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> canvases = [];</p> <p> Funktion 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 = new vCanvas(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> Verhalten: 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" in window){<br> requestAnimationFrame(animate);<br> }<br> else if("webkitRequestAnimationFrame" in window){<br> webkitRequestAnimationFrame(animate);<br> }<br> else if("msRequestAnimationFrame" in window){<br> msRequestAnimationFrame(animate);<br> }<br> else if("mozRequestAnimationFrame" in window){<br> mozRequestAnimationFrame(animate);<br> }<br> }</p> <p> video.play();<br> initAnimate();<br> </script>