Las transformaciones básicas en el canvas son 3: traslación, rotación y escalado.
La forma en que funcionan es poco intuitiva puesto que lo que hacen no es trasladar, rotar y escalar elementos en el canvas sino que actúan sobre el origen y los ejes de coordenadas del canvas, modificando su posición, orientación y escala, de forma que los elementos dibujados antes de una transformación permanecen inalterados y los que se dibujen después de aplicar la transformación son afectados por ella.
Las transformaciones se aplican sobre el contexto del canvas.
Traslación
Traslada el origen de cordenadas del canvas desde la esquina superior izquierda al punto x,y.
Rotación
Rota los ejes de coordenadas en torno al origen, un angulo especificado en radianes, en sentido horario. Para pasar de grados a radianes:
angulo_en_radianes = angulo_en_grados * (Math.PI/180)
Escalado
Mutiplica las coordenadas en el eje X e Y por el factorX y el factorY.
Ejemplo
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="my_canvas" width="300px" height="200px"
style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
var x = 10;
var y = 10;
var w = 50;
var h = 50;
var factorX = 0.5;
var factorY = 0.5;
// escalado
ctx.scale(factorX, factorY);
ctx.fillStyle = "#ff0000"; // rojo
ctx.fillRect(x, y, w, h);
// traslación
ctx.translate(100, 50);
ctx.fillStyle = "#00ff00"; // verde
ctx.fillRect(x, y, w, h);
// rotación
ctx.rotate(30 * Math.PI/180);
// dibujamos el nuevo eje x
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(50,0);
ctx.stroke();
// y el nuevo eje Y
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,50);
ctx.stroke();
ctx.fillStyle = "#0000ff"; // azul
ctx.fillRect(x, y, w, h);
</script>
</body>
</html>
En el ejemplo se puede probar a cambiar la escala, cambiando factorX y factorY. El ejemplo tiene factorX = 0.5 y factorY = 0.5 (mitad de escala). El tamaño normal se consigue con factorX = 1, factorY = 1 y el doble de tamaño se consigue con factorX = 2, factorY = 2.
Este post tiene una continuación en la entrada: Guardar y restaurar el contexto del canvas
No hay comentarios:
Publicar un comentario