El método setTransform() se usa para reemplazar la array de transformación actual, es decir, cada objeto en el lienzo tiene una array de transformación actual. El método setTransform() se usa para restablecer la transformación actual a la array de identidad y luego ejecuta transform() con los mismos parámetros.
a c e b d f 0 0 1
Simplemente permite escalar, mover, sesgar y rotar el contexto actual.
Sintaxis:
context.setTransform(a, b, c, d, e, f);
Valores paramétricos:
- a denota escalado horizontal
- b denota sesgo horizontal
- c denota sesgo vertical
- d denota escala vertical
- e denota movimiento horizontal
- f denota movimiento vertical
Ejemplo:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:green"> GeeksforGeeks</h3>
<h3 style="color:green">
HTML canvas setTransform() method
</h3>
<canvas id="gfgCanvas"
width="400"
height="300"
style="border:2px solid ;">
</canvas>
<script>
var gfg = document.getElementById("gfgCanvas");
var context = gfg.getContext("2d");
context.fillStyle = "green";
context.fillRect(80, 80, 200, 100)
context.setTransform(1, 0, 2, 2, 10, 10);
context.fillStyle = "black";
context.fillRect(20, 20, 20, 80);
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Cromo
- Mozilla Firefox
- Internet Explorer 9.0
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA