HTML and CSS Reference
In-Depth Information
context
.
strokeStyle
=
'#000000'
;
context
.
strokeRect
(
5
,
5
,
theCanvas
.
width
−
10
,
theCanvas
.
height
−
10
);
//video
//*** Start rotation calculation
context
.
save
();
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
rotation
*
Math
.
PI
/
180
;
var
var
x
=
100
;
var
var
y
=
100
;
var
var
videoWidth
=
320
;
var
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
.