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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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 | Scales the drawing horizontally | |
b | Skew the the drawing horizontally | |
c | Skew the the drawing vertically | |
d | Scales the drawing vertically | |
e | Moves the the drawing horizontally | |
f | Moves the the drawing vertically |
❮ Objeto de tela