Método HTML canvas transform()
Definição e uso
Cada objeto na tela de desenho 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ê ajuste, gire, mova e incline o ambiente atual.
Notas:A 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()、scale()、translate() ou outras transformações realizadas por transform(). Por exemplo: se você já definiu o desenho como dobrado duas vezes, o método transform() dobrará o desenho duas vezes, e o seu desenho final será dobrado quatro vezes.
Dica:Veja setTransform() Método, que não ocorre comportamento em relação a outras transformações.
Exemplo
Desenhar um retângulo; adicionar uma nova matriz de transformação com transform() e desenhar o retângulo novamente; adicionar uma nova matriz de transformação e desenhar o retângulo novamente. Note 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);
Valores dos parâmetros
| Parâmetros | 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 suportou a 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>.
