Método HTML canvas setTransform()
Definição e uso
Cada objeto na tela possui uma matriz de transformação atual.
setTransform() O método reseta a matriz de transformação atual para a matriz unitária e executa com os mesmos parâmetros transform().
Em outras palavras, setTransform() permite que você escalar, girar, mover e inclinar o ambiente atual.
Notas:Esta transformação afetará apenas o desenho após a chamada do método setTransform().
Exemplo
Desenhe um retângulo, resete e crie uma nova matriz de transformação usando setTransform(), desenhe novamente o retângulo, resete e crie uma nova matriz de transformação, e desenhe o retângulo novamente. Observe que, a cada vez que você chama setTransform(), ele reseta a matriz de transformação anterior e constrói uma nova matriz, portanto, no exemplo a seguir, não será exibido o retângulo vermelho, pois ele está abaixo do retângulo azul:
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);
Sintaxe
context.setTransform(a,b,c,d,e,f);
Valores dos parâmetros
| Parâmetros | Descrição |
|---|---|
| a | Desenho de rotação horizontal. |
| b | Desenho de inclinação horizontal. |
| c | Desenho de inclinação vertical. |
| d | Desenho de escalonamento vertical. |
| 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 |
Notas:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
