Exemplo
Desenhe um retângulo, redefinir e criar uma nova matriz de transformação com setTransform() , desenhar o retângulo novamente, redefinir e criar uma nova matriz de transformação, em seguida, desenhar o retângulo novamente. Observe que cada vez que você chamar setTransform() , ele redefine a matriz de transformação anterior e então constrói a nova matriz, assim, no exemplo abaixo, o retângulo vermelho não é mostrado, porque está sob o rectâ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);
Tente você mesmo " Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| setTransform() | sim | 9 | sim | sim | sim |
Definição e Uso
Cada objeto na tela tem uma matriz de transformação atual.
O setTransform() método repõe transformar a corrente para a matriz de identidade, e, em seguida, é executado transform() com os mesmos argumentos.
Em outras palavras, o setTransform() método permite dimensionar, girar, mover e inclinar o contexto atual.
Nota: A transformação só irá afectar desenhos feitos após o método setTransform é chamado.
| sintaxe JavaScript: | context.setTransform( a,b,c,d,e,f ); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| a | Dimensiona os desenhos horizontalmente | Jogue " |
| b | Distorce os desenhos horizontalmente | Jogue " |
| c | Distorce os desenhos verticalmente | Jogue " |
| d | Dimensiona os desenhos verticalmente | Jogue " |
| e | Move os desenhos horizontalmente | Jogue " |
| f | Move os desenhos verticalmente | Jogue " |