Latest web development tutorials

setTransform tela HTML () Método

HTML Manual de lona Referência HTML Manual de lona Referência

Exemplos

Desenhar um rectângulo setTransform () redefinir e criar uma nova matriz de transformação, desenhe um retângulo novamente, redefinir e criar uma nova matriz de transformação, e, em seguida, desenhe um retângulo novamente. Por favor note que sempre que você chamar setTransform (), que redefine antes de uma matriz de transformação e, em seguida, construir uma nova matriz, no exemplo abaixo, o retângulo vermelho não é exibido porque é abaixo do retângulo azul:

YourbrowserdoesnotsupporttheHTML5canvastag.

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 »

Suporte a navegadores

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari apoio setTransform () 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.

setTransform () para a matriz de transformação atual Redefine a matriz, e depois executar com os mesmos parâmetros da Transform () .

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

Nota: Este método de conversão só afetará setTransform () é chamado após o sorteio.

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

parâmetro Valor

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

HTML Manual de lona Referência HTML Manual de lona Referência