Manual de referência HTML

大全 de etiquetas HTML

Método transform() do HTML canvas

transform() é o método Canvas 2O API D usa várias vezes a técnica de sobreposição da transformação atual com a matriz, a matriz é descrita pelos parâmetros do método. Você pode escalar, girar, mover e inclinar o contexto.

Manual de referência do canvas HTML

Exemplo online

Desenhe um retângulo, use transform() para adicionar uma nova matriz de transformação, desenhe novamente o retângulo, adicione uma nova matriz de transformação e desenhe novamente o retângulo. Observe que a cada chamada de transform(), ele se baseia na matriz de transformação anterior:

Exemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso do método transform() no 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="green";
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);
</script>
</body>
</html>

Teste e veja ‹/›

Compatibilidade do navegador

IEFirefoxOperaChromeSafari

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

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

Definição e uso

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

O método transform() substitui a matriz de transformação atual. Ele multiplica a matriz de transformação atual com a seguinte descrita:

a	c	e
b	d	f
0	0	1

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

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

Atenção:O comportamento do método transform() em relação a outras transformações realizadas por rotate(), scale(), translate() ou transform(). Por exemplo: Se você já configurou o desenho para dobrar, o método transform() dobrará o desenho duas vezes, resultando em um desenho final dobrado quatro vezes.

Dica:Por favor, consulte setTransform() Método, que não se comportará em relação a outras transformações.

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

Valor do parâmetro

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

Manual de referência do canvas HTML

HTML: <template> etiqueta