Transformaciones
Las transformaciones son muy importantes a la hora de manipular los trazados . El <canvas> de HTML5 viene de fabrica con tres tipos de transformaciones:
tanslate(), scale() y rotate(), además de otros dos métodos que nos permiten hacer transformaciones a medida: transform() y setTransform().
Importante: las transformaciones son aditivas, o sea: cada transformación se sumará a la transformación anterior.
| Método | JavaScript | Descripción | Defecto |
|---|---|---|---|
| translate() | context.translate(x,y); | Mueve el origen (0,0) del <canvas> en un punto dado (x,y). |
0,0 |
| rotate() | context.rotate(ángulo); | Gira los trazados posteriores un ángulo dado (en radianes).
El punto alrededor del cual gira coincide con el origen del <canvas> (0,0) |
0 |
| scale() | context.scale(h,v); | Reduce o amplía a escala el dibujo actual. h = horizontal; v = vertical Valores que pueden tomar los parametros del método: 1=100%, 0.5=50%, 2=200%, etc... |
1,1 |
| transform() | context.transform(a,b,c,d,e,f); | Cambia los trazados posteriores, cambiando la matriz de estos. | 1,0,0,0,1,0 |
| setTransform() | context.setTransform(a,b,c,d,e,f); | Reinicia el canvas a los valores iniciales, antes de proceder a cambiar los trazados posteriores. | 1,0,0,0,1,0 |
Vea la chuleta con las propiedades y metodos() de canvas.
Trasladar con translate()
El método translate() mueve el origen (0,0) del <canvas> en un punto dado.
A continuación vamos a dibujarun rectángulo con fillRect(). Situamos el rectángulo en el origen del <canvas>, aplicaremos el método translate() y volvemos a dibujar otro rectángulo igual. Veamos que pasa.
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "blue";
ctx.fillRect(0,0,100,50);
ctx.translate(75, 100);
ctx.fillStyle = "red";
ctx.fillRect(0,0,100,50);
}
}Girar con rotate()
El método rotate() gira los trazados posteriores con un ángulo dado ( en radianes ).
El punto alrededor del cual gira coincide con el origen del contexto (0,0).
Si queremos que un trazado gire alrededor de otro punto, tenemos que trasladar el origen del contexto en este punto antes de girar.
A continuación utilizamos un bucle for ( for loop ) para dibujar una série de rectángulos.
Después de cada rectángulo giramos el contexto 20° (Math.PI/9) en el sentido del reloj.
Como que las transformaciones son cumulativas, y los rectángulos giran alrededor del origen del contexto, al final tendremos algo parecido a un abanico de rectángulos.
var canvas = document.getElementById("lienzo1");
if (canvas && canvas.getContext) {
var ctx1 = canvas.getContext("2d");
if (ctx1) {
var cw = canvas.width;
var ch = canvas.height;
var w = 100;
var h = 15;
for( var i = 0; i<5; i++ ){
ctx1.fillStyle = "blue";
//dibujamos un rectangulo
ctx1.fillRect((cw-w)/2, 0, w, h);
// giramos 20 grados
ctx1.rotate(Math.PI/9);
}
}
}Cambiar el centro de rotación
Si queremos que un trazado gire alrededor de otro punto ( que no sea el la esquina izquierda arriba del <canvas> ) tenemos que trasladar el origen del contexto en el punto deseado.
A continuación trasladamos el origen en el centro del canvas ( ctx.translate(cw/2, ch/2); ), y el contexto es transparente ( ctx.globalAlpha=0.4 ).
Utilizamos un bucle for ( for loop ) para dibujar una série de cuadrados azules. Después de dibujar cada cuadrado giramos el contexto 60ยบ ( ctx.rotate(Math.PI/3); ) en el sentido del reloj.
for( var i = 0; i<6; i++){
//dibujamos un nuevo rectangulo
ctx.fillRect(-w,-h,w,h);
ctx.strokeRect(-w,-h,w,h);
// giramos 60 grados
ctx.rotate(Math.PI/3);
}Veamos como queda.
var canvas2 = document.getElementById("lienzo2");
if (canvas2 && canvas2.getContext) {
var ctx2 = canvas2.getContext("2d");
if (ctx2) {
var cw = canvas2.width;
var ch = canvas2.height;
var w = 50;
var h = 50;
ctx2.fillStyle = "blue";
ctx2.globalAlpha=0.4;
// trasladamos el origen en el centro del canvas
ctx2.translate(cw/2, ch/2);
for( var i = 0; i<6; i++){
//dibujamos un nuevo rectangulo
ctx2.fillRect(-w,-h,w,h);
ctx2.strokeRect(-w,-h,w,h);
// giramos 60 grados
ctx2.rotate(Math.PI/3);
}
}
}Redimensionar con scale()
El método scale(h,v) reduce o amplía a escala el dibujo actual, donde h representa la escala horizontal, y v la escala vertical.
Por ejemplo: si h = 0.5 la altura se verá reducida a un 50%. Si por el contrario v = 2, la anchura aumentara a 200% de su valor inicial.
Veamos un ejemplo.
var canvas3 = document.getElementById("lienzo3");
if (canvas3 && canvas3.getContext) {
var ctx3 = canvas3.getContext("2d");
if (ctx3) {
ctx3.fillStyle = "#f00";
ctx3.lineWidth=5;
// dibuja el rectángulo pequeño
ctx3.strokeRect(12,15,25,15);
ctx3.fillRect(12,15,25,15);
// redimensiona
ctx3.scale(5,2.5);
// el mismo código que dibujó el rectángulo pequeño
// dibuja ahora el rectángulo grande
ctx3.strokeRect(12,15,25,15);
ctx3.fillRect(12,15,25,15);
}
}