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
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 );
}
Search WWH ::

Custom Search