Para mover el sistema de coordenadas disponemos del método:
translate(x,y)
Luego de llamar a este método la coordenada (0,0) corresponderá al par de valores indicados en los parámetros.
El uso de esta transformación nos facilita la creación de figuras.
Confeccionaremos un programa que implemente una función que dibuje un triángulo, la función recibe la coordenada donde debe dibujarla y la base y altura del triángulo:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujarTriangulo(lienzo,x,y,base,altura) {
lienzo.save();
lienzo.translate(x,y);
lienzo.fillStyle="rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(base/2,0);
lienzo.lineTo(0,altura);
lienzo.lineTo(base,altura);
lienzo.lineTo(base/2,0);
lienzo.fill();
lienzo.restore();
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
for(var col=0;col<550;col+=30)
dibujarTriangulo(lienzo,col,10,30,130);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Lo más importante que debemos entender está en la función dibujarTriangulo. Lo primero que hacemos es grabar el estado (save()) esto hace que quede almacenado los valores actuales del punto de origen. Movemos el punto de origen llamando a translate. Ahora podemos dibujar el triángulo considerando que la coordenada (0,0) coincide con los parámetros (x,y). Luego de dibujar recuperamos el estado actual llamando a restore():
function dibujarTriangulo(lienzo,x,y,base,altura) {
lienzo.save();
lienzo.translate(x,y);
lienzo.fillStyle="rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(base/2,0);
lienzo.lineTo(0,altura);
lienzo.lineTo(base,altura);
lienzo.lineTo(base/2,0);
lienzo.fill();
lienzo.restore();
}