Manual de referencia HTML

Completo de etiquetas HTML

Método transform() de HTML canvas

transform() es el método Canvas 2D API utiliza varios métodos de superposición de la transformación actual mediante matrices, matrices descritas por los parámetros del método. Puede escalar, girar, mover y inclinar el contexto.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibuje un rectángulo, use transform() para agregar una nueva matriz de transformación, dibuje el rectángulo nuevamente, agregue una nueva matriz de transformación y dibuje el rectángulo nuevamente. Tenga en cuenta que cada llamada a transform() se basa en la matriz de transformación anterior:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método transform() en HTML canvas-Tutoriales básicos(oldtoolbag.com)</<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px sólido #d3d3d3>
Su navegador no admite 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>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten transform(). Método.

Nota:Internet Explorer 8 Las versiones anteriores no admiten el elemento <canvas>.

Definición y uso

Cada objeto en el lienzo tiene una matriz de transformación actual.

El método transform() reemplaza la matriz de transformación actual. Multiplica la matriz de transformación actual con la siguiente descripción de la matriz:

a	c	e
b	d	f
0	0	1

En otras palabras, transform() le permite escalar, rotar, mover e inclinar el entorno actual.

Nota:Esta transformación solo afectará al dibujo después de la llamada al método transform().

Nota:El comportamiento del método transform() se relaciona con otras transformaciones realizadas por rotate(), scale(), translate() o transform(). Por ejemplo: si ya ha configurado el dibujo para que se duplique, el método transform() duplicará el dibujo, y su dibujo final se ampliará cuatro veces.

Consejo:Por favor, consulte setTransform() Método, que no se comportará en relación con otras transformaciones.

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

Valor del parámetro

Parámetros	Descripción
a	Escalado horizontal de dibujo.
b	Inclinación horizontal de dibujo.
c	Inclinación vertical de dibujo.
d	Escalado vertical de dibujo.
e	Movimiento horizontal de dibujo.
f	Movimiento vertical de dibujo.

Manual de referencia de canvas HTML

HTML: <template> etiqueta