• Choose a category
• All
• Classic-Fiction

//video

//*** Start rotation calculation

context.save();

context.setTransform(1,0,0,1,0,0);

var angleInRadians = rotation * Math.PI / 180;

var x = 100;

var y = 100;

var videoWidth=320;

var videoHeight=240;

context.translate(x+.5*videoWidth, y+.5*videoHeight);

context.rotate(angleInRadians);

//****

context.drawImage(videoElement ,-.5*videoWidth, -.5*videoHeight);

//*** restore screen

context.restore();

rotation++;

//***

}

Figure 6-9 shows what the video will look like when rotating on the canvas. You can see the full code for this in Example 6-9.

Figure 6-9. Canvas video rotation

Example 6-9. Rotating a video

Canvas Video Puzzle

Now we arrive at the most involved example of this section. We are going to create a puzzle game based on the video we have displayed on the canvas, illustrated in Figure 6-10. Here are the steps showing how the game will operate:

We will load the video onto the canvas but not display it.

We will decide how many parts we want to be in our puzzle.

We will create a board array that holds all the puzzle pieces.

The pieces will be displayed in a 4×4 grid.

We will randomize the pieces on the board to mix up the puzzle.

We will add an event listener for the mouse button.

We will set an interval to call drawScreen().

We will wait for the user to click a puzzle piece.

While we are waiting, the various parts of the video will play just as though they were one video.