HTML and CSS Reference

In-Depth Information

Rotation and Translation Transformations

Anobjectonthecanvasissaidtobeatthe0anglerotationwhenitisfacingtotheleft.(Thisis

important if an object has a facing side; otherwise, we will use this as a guide.) Consequently,

if we draw an equilateral box (all four sides are the same length), it doesn't have an initial

facing side other than one of the flat sides facing to the left. Let's draw that box for reference:

//now draw a red square

context
.
fillStyle
=
"red"
;

context
.
fillRect
(
100
,
100
,
50
,
50
);

Now, if we want to rotate the entire canvas 45 degrees, we need to do a couple simple steps.

First, we always set the current Canvas transformation to the “identity” (or “reset”) matrix:

context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);

Because Canvas uses radians, not degrees, to specify its transformations, we need to convert

our 45-degree angle into radians:

var

var
angleInRadians
=
45
*
Math
.
PI
/
180
;

context
.
rotate
(
angleInRadians
);

Lesson 1: Transformations are applied to shapes and paths drawn after

the setTransform() or other transformation function is called

If you use this code verbatim, you will see a funny result...
nothing
! This is because the

setTransform()
function call affects only shapes drawn to the canvas
after
it is applied. We

drewoursquarefirstandthensetthetransformationproperties.Thisresultedinnochange(or

transform)tothedrawnsquare.
Example 2-7
givesthecodeinthecorrectordertoproducethe

expected result, as illustrated in
Figure 2-12
.

Example 2-7. Simple rotation transformation

function

function
drawScreen
() {

//now draw a red square

context
.
setTransform
(
1
,
0
,
0
,
1
,
0
,
0
);

var

var
angleInRadians
=
45
*
Math
.
PI
/
180
;

context
.
rotate
(
angleInRadians
);

context
.
fillStyle
=
"red"
;

context
.
fillRect
(
100
,
100
,
50
,
50
);

}