HTML and CSS Reference
In-Depth Information
var
var
height
=
50
;
context
.
translate
(
x
+
.
5
*
width
,
y
+
.
5
*
height
);
context
.
rotate
(
angleInRadians
);
context
.
fillStyle
=
"red"
;
context
.
fillRect
(
-
.
5
*
width
,
-
.
5
*
height
,
width
,
height
);
}
Figure 2-16. Rotation around the center point
Let's look at one final rotation example.
Example 2-10
takes
Example 2-9
and simply adds
four separate 40×40 squares to the canvas, rotating each one slightly. The result is shown in
Example 2-10. Multiple rotated squares
function
function
drawScreen
() {
//now draw a red square
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
45
*
Math
.
PI
/
180
;
var
var
x
=
50
;
var
var
y
=
100
;
var
var
width
=
40
;
var
var
height
=
40
;
context
.
translate
(
x
+
.
5
*
width
,
y
+
.
5
*
height
);
context
.
rotate
(
angleInRadians
);
context
.
fillStyle
=
"red"
;
context
.
fillRect
(
-
.
5
*
width
,
-
.
5
*
height
,
width
,
height
);
context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);
var
var
angleInRadians
=
75
*
Math
.
PI
/
180
;
var
var
x
=
100
;
var
var
y
=
100
;
var
var
width
=
40
;
var
var
height
=
40
;
context
.
translate
(
x
+
.
5
*
width
,
y
+
.
5
*
height
);
context
.
rotate
(
angleInRadians
);