Tutoriel sur la création de puzzles vidéo avec les astuces du didacticiel HTML5_html5

Il y a quelques jours, mon collègue m'a montré un effet spécial, qui est un puzzle. La différence est que le puzzle est une animation. Il m'a demandé de faire une DEMO, alors j'ai travaillé dessus moi-même pendant un moment, et ce n'était effectivement pas difficile. C'est facile à faire avec de la toile. Ce billet de blog ne convient donc pas aux experts. . . . Je l'ai juste écrit avec désinvolture, pour m'amuser.
Rendu :

Au moins quand j'ai vu ça pour la première fois, j'ai trouvé que c'était assez nouveau, alors j'ai pensé à le faire pour m'amuser. Si vous pensez que l'affiche est sortie, n'hésitez pas à me donner un coup de pouce

Sans plus tarder, commençons par DEMO : Video Puzzle (Vous devrez peut-être attendre un peu pour voir l'effet. J'ai créé un lien vidéo directement depuis w3school. Vous pouvez le glisser-déposer. C'est très simple, et peut encore contenir quelques bugs. Après tout, ce n'est qu'une DÉMO pour le plaisir. Expliquez simplement les principes.) Un autre point est que dessiner directement l'image actuelle de la vidéo dans le canevas ne semble pas être pris en charge sur les appareils mobiles. . . . Au moins, je l'ai regardé sur mon iPad et j'ai découvert que je ne pouvais pas dessiner. Si quelqu'un sait comment résoudre ce problème, répondez-moi, je lui en serais très reconnaissant

Principe : Chaque pièce du puzzle est une toile, et une toile hors écran est également requise. Créez d’abord une balise vidéo

Et cachez la vidéo, puis dessinez chaque image dans le canevas hors écran lors de la lecture de la vidéo (le canevas hors écran est le canevas caché, utilisé pour enregistrer les données. La méthode d'écriture est très simple :

, utilisez simplement la méthode drawImage pour le dessiner directement. Pourquoi utiliser d'abord un canevas hors écran ? Parce que si vous dessinez directement chaque image de données dans le canevas de toutes les pièces du puzzle en même temps, le navigateur plantera instantanément. Utilisez donc un canevas hors écran comme tampon. Enregistrez d’abord les données de l’image actuelle sur la toile, puis dessinez la toile dans la toile en tant que pièce du puzzle. Dessiner une toile dans une toile est également très simple, vous pouvez également utiliser drawImage :

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

Alors. . . . Le principe est aussi simple que cela. Je voudrais vous rappeler plus tard que lorsque vous utilisez requestAnimationFrame pour parcourir des images, vous devez limiter la vitesse. Par exemple, comme écrit ci-dessous, je récupère toutes les 30 millisecondes. ~50 millisecondes. S'il est trop faible, le navigateur plantera facilement. S'il est trop élevé, le navigateur plantera. Si la vidéo est bloquée, la vidéo se bloquera :

<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> 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 = 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.behaviour();<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> comportement : 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" dans la fenêtre){<br> requestAnimationFrame(animate);<br> }<br> else if("webkitRequestAnimationFrame" dans la fenêtre){<br> webkitRequestAnimationFrame(animate);<br> }<br> else if("msRequestAnimationFrame" dans la fenêtre){<br> msRequestAnimationFrame(animate);<br> }<br> else if("mozRequestAnimationFrame" dans la fenêtre){<br> mozRequestAnimationFrame(animate);<br> }<br> }</p> <p> video.play();<br> initAnimate();<br> </script>