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