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ê chamar 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 navegador
Os números na tabela especificar a primeira versão do navegador que suporta totalmente o método.
| Método | |||||
|---|---|---|---|---|---|
| transform() | 4.0 | 9 | 3,6 | 4.0 | 10.1 |
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 de corrente. Multiplica-se a matriz de transformação de corrente com a matriz descrita por:
| uma | c | e |
| b | d | f |
| 0 | 0 | 1 |
Em outras palavras, a transform() método permite dimensionar, girar, mover e distorcer o contexto atual.
Note: A transformação só irá afectar desenhos feitos após a transform() método é chamado.
Note: A transform() método se comporta relativamente a outras transformações realizadas por rotate() , scale() , translate() , ou transform() . Exemplo: Se você já tiver definido o desenho em escala por dois, eo transform() método dimensiona seus desenhos por dois, seus desenhos irá agora escala por quatro.
Tip: Confira o 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 horizontalmente | Jogue " |
| b | Enviesar o o desenho horizontalmente | Jogue " |
| c | Enviesar o o desenho verticalmente | Jogue " |
| d | Dimensiona o desenho verticalmente | Jogue " |
| e | Move ao desenho horizontalmente | Jogue " |
| f | Move ao desenho verticalmente | Jogue " |
<Object Canvas