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
drawScreen() function is
where all the real action takes place for this example. First, we need
to save the current canvas context so that 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 everything. Because the canvas works in
immediate mode, there is no stack of objects to manipulate. 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:
Next we reset the context transformation to the identity, which clears anything that was set previously:
Then we need to set up some variables that will be used for the rotation calculation. ...