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 with the same parameters transform().
In other words, setTransform() allows you to scale, rotate, move, and skew the current environment.
Observação: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 the red rectangle will not be displayed in the following example 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 value
| Parameter | Description |
|---|---|
| a | Horizontal rotation drawing. |
| b | Horizontal skew drawing. |
| c | Vertical skew drawing. |
| d | Vertical scaling drawing. |
| e | Desenho de movimento horizontal. |
| f | Desenho de movimento vertical. |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou a primeira vez essa propriedade.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
