Manual de referencia de HTML

Completos de etiquetas HTML

Método setTransform() de HTML canvas

setTransform() es el método de Canvas 2D API utiliza la matriz de unidad para restablecer (sobreescritura) la transformación actual y llama a los métodos de transformación, que se describen por las variables del método.

Manual de referencia de canvas HTML

Ejemplo en línea

Dibujar un rectángulo, usar setTransform() para restablecer y crear una nueva matriz de transformación, dibujar el rectángulo nuevamente, restablecer y crear una nueva matriz de transformación, luego dibujar el rectángulo nuevamente. Tenga en cuenta que cada vez que se llama a setTransform(), se restablece la matriz de transformación anterior y se construye una nueva matriz, por lo que en el siguiente ejemplo, no se muestra el rectángulo rojo, porque está debajo del rectángulo azul:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>Uso del método setTransform() de 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="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>

Prueba y mira ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

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

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

Definición y uso

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

El método setTransform() restablece la matriz de transformación actual a la matriz de unidad y luego ejecuta transform().

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

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

Sintaxis de JavaScript:	context.setTransform(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