Exemplo
Desenhe um retângulo, adicione uma nova matriz de transformação com transform() , desenhar o retângulo novamente, adicione uma nova matriz de transformação, em seguida, desenhar o retângulo novamente. Observe que cada vez que você chama transform() , que tem por base a 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); 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 | |||||
|---|---|---|---|---|---|
| transform() | sim | 9 | sim | sim | sim |
Definição e Uso
Cada objeto na tela tem uma matriz de transformação atual.
A transform() método substitui a matriz de transformação atual. Multiplica a matriz de transformação atual com a matriz descrita por:
| a | c | e |
| b | d | f |
| 0 | 0 | 1 |
Em outras palavras, a transform() método permite dimensionar, girar, mover e inclinar o contexto atual.
Nota: A transformação só irá afectar desenhos feitos após a transform() método é chamado.
Nota: A transform() método se comporta relativamente a outras transformações feitas por rotate(), scale(), translate() , ou transform() .Exemplo: Se você já tiver definido o desenho em escala por dois, ea transform() método dimensiona seus desenhos por dois, seus desenhos irá agora escala por quatro.
Dica: Confira a setTransform() método, que não se comporta relativamente a outras transformações.
| sintaxe JavaScript: | context.transform( a,b,c,d,e,f ); |
|---|
Os valores dos parâmetros
| Parâmetro | Descrição | Jogue |
|---|---|---|
| a | Dimensiona o desenho horizontal | Jogue " |
| b | Inclinar o desenho horizontal | Jogue " |
| c | Inclinar o desenho verticalmente | Jogue " |
| d | Dimensiona o desenho verticalmente | Jogue " |
| e | Move o desenho horizontal | Jogue " |
| f | Move o desenho verticalmente | Jogue " |