Mixing HTML5 Video and Canvas - HTML5 Canvas - page 289

</div>
</body>
</html>
Canvas Video Transformations: Rotation
Showing a static video on the screen is one thing, but transforming it on the screen
using alpha transparency and rotations is quite another. These types of transformations
can be easily applied to video on the canvas in much the same way as you would apply
them to an image or a drawing object.
In this example, we will create a video that rotates clockwise. To achieve this effect, we
first create a variable, rotation , which we will use to hold the current values of the
rotation property that we will apply to the video. We create this variable outside of the
drawScreen() function, inside canvasApp() :
var rotation = 0;
The drawScreen() function is where all the real action takes place for this example. First,
we need to save the current canvas context so we can restore it after we perform the
transformation. We covered this in depth in Chapter 2 , but here's a quick refresher.
Transformations on the canvas are global in nature, which means they affect every-
thing . Since the canvas works in immediate mode, there is no stack of objects to ma-
nipulate. Instead, we need to save the canvas context before the transformation, apply
the transformation, and then restore the saved context afterward.
First, we save it:
context.save();
Next, we reset the context transformation to the identity, which clears anything that
was set previously:
context.setTransform(1,0,0,1,0,0);
Then we need to set up some variables that will be used for the rotation calculation.
The x and y variables set the upper-left location of the video on the canvas. The video
Width and videoHeight variables will be used to help rotate the video from the center:
var x = 100;
var y = 100;
var videoWidth=320;
var videoHeight=240;
Now it is time to use the rotation variable, which represents the angle that we rotated
the video on the canvas. It starts at 0 , and we will increase it every time drawScreen()
is called. However, the context.rotate() method requires an angle to be converted to
radians when passed as its lone parameter. The following line of code converts the value
in the rotation variable to radians, and stores it in a variable named angleInRadians :
var angleInRadians = rotation * Math.PI / 180;