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

Custom Search