Método de transformação do canvas
Definição e uso
Cada objeto na tela possui uma matriz de transformação atual.
transform() Método substitui a matriz de transformação atual. Ele opera a matriz de transformação atual com a matriz descrita a seguir:
a c e b d f 0 0 1
Em outras palavras, transform() permite que você escalone, gire, mova e incline o ambiente atual.
Notas:Essa transformação afetará apenas o desenho após a chamada do método transform().
Notas:O comportamento do método transform() em relação a rotate()escale()etranslate() ou outras transformações realizadas por transform(). Por exemplo: se você já configurou o desenho para dobrar, o método transform() dobrará o desenho novamente, e o seu desenho final será ampliado quatro vezes.
Dica:Veja também setTransform() Método, que não ocorre comportamento em relação a outras transformações.
Exemplo
Desenhe um retângulo; adicione uma nova matriz de transformação usando transform() e desenhe o retângulo novamente; adicione outra matriz de transformação e desenhe o retângulo novamente. Observe que a cada vez que você chama transform(), ela constrói sobre a matriz de transformação anterior:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="yellow";
ctx.fillRect(0,0,250,100)
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="red";
ctx.fillRect(0,0,250,100);
ctx.transform(1,0.5,-0.5,1,30,10);
ctx.fillStyle="blue";
ctx.fillRect(0,0,250,100);
Sintaxe
context.transform(a,b,c,d,e,f);
Valor do parâmetro
| Parâmetro | Descrição |
|---|---|
| a | Desenho de escalonamento 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 suporta completamente essa propriedade pela primeira vez.
| 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>.
