Método HTML canvas transform()

❮ Referencia de lienzo HTML

Ejemplo

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

Su navegador no es compatible con HTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.fillStyle = "yellow";
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);

Compatibilidad con navegador

Los números en la tabla especifican la primera versión del navegador que soporta totalmente este método.

Method
transform() Yes 9.0 Yes Yes Yes

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 por la matriz descrita por:

a C mi
B D F
0 0 1

En otras palabras, el método transform() le permite escalar, rotar, mover y sesgar el contexto actual.

Nota: La transformación solo afectará a los dibujos realizados después de llamar al método transform().

Nota: El método transform() se comporta de manera relativa a otras transformaciones realizadas por giratorio(), escala(), traducir() o transformar(). Ejemplo: si ya configuró su dibujo para escalar por dos, y el método transform() escala sus dibujos por dos, sus dibujos ahora se escalarán por cuatro.

Sugerencia: Consulte el método setTransform() , que no se comporta de manera relativa a otras transformaciones.

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

Valores paramétricos

Parameter Description Play it
a Horizontal scaling
b Horizontal skewing
c Vertical skewing
d Vertical scaling
e Horizontal moving
f Vertical moving

❮ Referencia de lienzo HTML