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>
<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>
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();
}
No hay comentarios:
Publicar un comentario