Exemplo
Desenhar um rectângulo, redefinir e criar uma nova matriz de transformação com setTransform() , desenhar o rectângulo de novo, redefinir e criar uma nova matriz de transformação, em seguida, extrair o rectângulo de novo. 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 navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| setTransform() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
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 distorcer o contexto atual.
Note: A transformação só afetará 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 | Escalas dos desenhos horizontalmente | Jogue " |
| b | Distorce os desenhos horizontalmente | Jogue " |
| c | Distorce os desenhos verticalmente | Jogue " |
| d | Escalas dos desenhos verticalmente | Jogue " |
| e | Move os desenhos horizontalmente | Jogue " |
| f | Move os desenhos verticalmente | Jogue " |
<Object Canvas