Método HTML canvas transform()
Exemplo
Desenhe um retângulo, adicione uma nova matriz de transformação com transform(), desenhe o retângulo novamente, adicione uma nova matriz de transformação e desenhe o retângulo novamente. Observe que cada vez que você chama transform(), ele se baseia na 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);
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
| Method | |||||
|---|---|---|---|---|---|
| transform() | Yes | 9.0 | Yes | Yes | Yes |
Definição e uso
Cada objeto na tela tem uma matriz de transformação atual.
O método transform() substitui a matriz de transformação atual. Ele multiplica a matriz de transformação atual com a matriz descrita por:
| uma | c | e |
| b | d | f |
| 0 | 0 | 1 |
Em outras palavras, o método transform() permite dimensionar, girar, mover e inclinar o contexto atual.
Nota: A transformação só afetará os desenhos feitos depois que o método transform() for chamado.
Nota: O método transform() se comporta relativamente a outras transformações feitas por rotate(), scale(), translate() ou transform(). Exemplo: Se você já configurou seu desenho para dimensionar em dois, e o método transform() dimensiona seus desenhos em dois, seus desenhos agora serão dimensionados em quatro.
Dica: Confira o método setTransform() , que não se comporta em relação a outras transformações.
| Sintaxe JavaScript: | contexto .transform( a,b,c,d,e,f ); |
|---|
Valores de parâmetro
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Referência de tela HTML