Canvas setTransform() Method
Definition and Usage
Each object on the canvas has a current transformation matrix.
setTransform() method resets the current transformation matrix to the unit matrix and then runs transform().
In other words, setTransform() allows you to scale, rotate, move, and tilt the current environment.
Nota:This transformation only affects the drawing after the setTransform() method call.
Example
Draw a rectangle, reset and create a new transformation matrix using setTransform(), draw a rectangle again, reset and create a new transformation matrix, and then draw a rectangle again. Note that when you call setTransform(), it resets the previous transformation matrix and then builds a new matrix, so in the following example, the red rectangle will not be displayed because it is below the blue rectangle:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.setTransform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Syntax
context.setTransform(a,b,c,d,e,f);
Parameter values
| Parameters | Description |
|---|---|
| a | Drawing rotated horizontally. |
| b | Drawing tilted horizontally. |
| c | Drawing tilted vertically. |
| d | Zooming vertically in the drawing. |
| e | Disegno di movimento orizzontale |
| f | Disegno di movimento verticale |
Supporto del browser
I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 e versioni precedenti non supportano l'elemento <canvas>.
