Do video puzzles with canvas

A few days ago colleagues showed me a special effect, is a jigsaw puzzle, the difference is, the puzzle is animation. He let me see To do a demo, so he himself for a while, it is really not difficult. It's easy to do with canvas. So this blog post is not suitable for the master to see .... It's just a random story to play with.

Effect Picture: ... At least I just saw this time feel quite novel, so will think of doing out to play, feel the landlord out of the brother please lightly spray

Not much to say, first demo: Video Puzzle (maybe wait a while to see the effect, I was directly in the w3school where a video link to take over, drag what all do is very simple, maybe there are some bugs, after all, just do a demo play, say the principle on the line, and a little, The current frame of the video directly to the canvas in the mobile device does not seem to support ... At least I took a look at the ipad, I found that the painting does not go up, if you know how to solve the problem of Daniel please answer for the younger brother, not very grateful

Principle: Each piece of the puzzle is a canvas, but also need a off screen canvas. The whole video label first

<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:-6000px;" ></video>

And hide the video, and then play the videos when each frame is drawn to the screen canvas (away from the screen canvas is hidden canvas, used to save the data), the writing is simple:

Ctx.drawimage (video, 0, 0, VW, VH);

, directly with the DrawImage method of painting up on the line. Why first use off the screen canvas, because if each frame of data directly to all the puzzle pieces of the canvas, the browser will suddenly collapse. So use a off screen canvas as a buffer. Save the current frame data to canvas and then canvas to the canvas as a puzzle piece. Canvas painting to canvas is also very simple, but also with DrawImage can be done:

Ctx2.drawimage (CS,-THIS.COLS*THIS.W,-this.rows*this.h, VW, VH);

And then.... The principle is so simple, then remind a point, use requestanimationframe loop to take frames, to limit the speed, such as the following, I was taken every 30 milliseconds, recommended 30~50 milliseconds, too low browser crash, too high video appears card frame phenomenon:

function animate () {            var newtime = new Date ();             if (Newtime-lasttime >) {  
              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);               &nbSp
});            }              if ("Requestanimationframe" in window) {        
        Requestanimationframe (animate);            }              else if ("webkitrequestanimationframe" in window) {      
          Webkitrequestanimationframe (animate);            }              else if ("msrequestanimationframe" in window) {       
         Msrequestanimationframe (animate);            } &NBsp;           else if ("mozrequestanimationframe" in window) {                
Mozrequestanimationframe (animate);            }        }

Finally post all the code:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">