canvas HTML transformação () Método

Exemplos

Desenhar um rectângulo de transformação () para adicionar uma nova matriz de transformação, novamente desenhar um retângulo, adicione uma nova matriz de transformação, e, em seguida, desenhe um retângulo novamente. Por favor, note que sempre que você chama de transformação (), será o primeiro a construir uma transformação na matriz:

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 »

Suporte a navegadores

Internet Explorer 9, suporte Firefox, Opera, Chrome e Safari transformar método ().

Nota: 8 e versões anteriores do Internet Explorer não suportam o elemento <canvas>.

Definição e Uso

Cada objeto na tela tem uma matriz de transformação atual.

transform () método substitui a matriz de transformação atual. É uma operação de matriz descrito abaixo para a matriz de transformação de corrente:

um	c	e
b	d	f
0	0	1

Em outras palavras, transformar () permite que você zoom, girar, mover e inclinar o ambiente atual.

Nota: Esta conversão só irá afectar o método transform () é chamado após o sorteio.

Nota: O comportamento transformar método () com respeito ao outro convertido por Rodar (), escala (), traduzir () ou transform () concluído.Por exemplo: Se você já tiver definido no desenho duas vezes, em seguida, transformá () método irá ampliar o desenho, o desenho irá eventualmente ser ampliado para quatro vezes.

Dica: Confira setTransform () método, o que não ocorre em relação a outros comportamentos transformar.

sintaxe JavaScript:	.transform contexto (a, b, c, d, e, f);

parâmetro Valor

参数	描述
a	水平缩放绘图。
b	水平倾斜绘图。
c	垂直倾斜绘图。
d	垂直缩放绘图。
e	水平移动绘图。
f	垂直移动绘图。

HTML Manual de lona Referência

canvas HTML traduzir () método: Anterior