Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (translate)





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();
}








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9626
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados