HTML and CSS Reference
In-Depth Information
Combining Scale and Rotation Transformations
If we want to both scale and rotate an object, Canvas transformations can easily be combined
to achieve the desired results (as shown in
Figure 2-20
). Let's look in
Example 2-12
at how
we might combine them by using
scale(2,2)
and
rotate(angleInRadians)
from our pre-
vious examples.
Example 2-12. Scale and rotation combined
function
function
drawScreen
() {
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
45
*
Math
.
PI
/
180
;
var
var
x
=
100
;
var
var
y
=
100
;
var
var
width
=
50
;
var
var
height
=
50
;
context
.
translate
(
x
+
.
5
*
width
,
y
+
.
5
*
height
);
context
.
scale
(
2
,
2
);
context
.
rotate
(
angleInRadians
);
context
.
fillStyle
=
"red"
;
context
.
fillRect
(
-
.
5
*
width
,
-
.
5
*
height
,
width
,
height
);
}
Figure 2-20. Scale and rotation combined
Example 2-13
also combines rotation and scale, this time using a rectangle.
Figure 2-21
re-
veals what it creates.
Example 2-13. Scale and rotate a nonsquare object
function
function
drawScreen
() {
//now draw a red rectangle
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
90
*
Math
.
PI
/
180
;
var
var
x
=
100
;
