Manual de referência do HTML

大全 do HTML etiqueta

Método setTransform() do HTML canvas

setTransform() é o método Canvas 2O D API redefine (sobrescreve) a transformação atual usando a matriz unitária e chama os métodos de transformação, que são descritos pelos parâmetros do método.

Manual de referência do canvas HTML

Exemplo online

Desenhe um retângulo, use setTransform() para redefinir e criar uma nova matriz de transformação, desenhe o retângulo novamente, redefina e crie uma nova matriz de transformação, e desenhe o retângulo novamente. Observe que, a cada chamada de setTransform(), ele redefine a matriz de transformação anterior e constrói uma nova matriz, portanto, no exemplo a seguir, o retângulo vermelho não é exibido porque está abaixo do retângulo azul:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método setTransform() do HTML canvas-Tutorial básico(oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Seu navegador não suporta HTML5　etiqueta canvas.
</canvas>
<script>
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);
</script>
</body>
</html>

Teste e veja ‹/›

Navegador compatível

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam setTransform() Método.

Atenção:Internet Explorer 8 Versões anteriores não suportam o elemento <canvas>.

Definição e uso

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

O método setTransform() redefine a matriz de transformação atual para a matriz unitária e executa transform().

Em outras palavras, setTransform() permite que você ajuste, gire, mova e incline o ambiente atual.

Atenção:A transformação afetará apenas o desenho após a chamada do método setTransform().

Sintaxe JavaScript:	context.setTransform(a,b,c,d,e,f);

Valor do parâmetro

Parâmetro	Descrição
a	Ajuste horizontal de escala de desenho.
b	Inclinação horizontal de desenho.
c	Inclinação vertical de desenho.
d	Ajuste vertical de escala de desenho.
e	Movimento horizontal de desenho.
f	Movimento vertical de desenho.

Manual de referência do canvas HTML

HTML: <template> etiqueta