Método setTransform () da tela HTML
Exemplo
Desenhe um retângulo, redefina e crie uma nova matriz de transformação com setTransform(), desenhe o retângulo novamente, redefina e crie uma nova matriz de transformação, depois desenhe o retângulo novamente. Observe que cada vez que você chama setTransform(), ele redefine a matriz de transformação anterior e, em seguida, constrói a nova matriz, portanto, no exemplo abaixo, o retângulo vermelho não é mostrado, pois está sob o 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);
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Definição e uso
Cada objeto na tela tem uma matriz de transformação atual.
O método setTransform() redefine a transformação atual para a matriz de identidade e, em seguida, executa transform() com os mesmos argumentos.
Em outras palavras, o método setTransform() permite dimensionar, girar, mover e inclinar o contexto atual.
Nota: A transformação só afetará os desenhos feitos depois que o método setTransform for chamado.
| Sintaxe JavaScript: | context .setTransform( 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