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 (dibujar líneas)





Para dibujar líneas disponemos de una serie de métodos que debemos llamar en un orden predeterminado.


El algoritmo para dibujar dos líneas que formen una letra "V" es:



<!DOCTYPE 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 dibujar()
{
var lienzo=retornarLienzo("lienzo1");
if (lienzo)
{
lienzo.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0,0);
lienzo.lineTo(150,300);
lienzo.lineTo(300,0);
//Trazar linea
lienzo.stroke();
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Inicializamos la propiedad que fija el color de la línea:



lienzo.strokeStyle = "rgb(200,0,0)";

Llamamos al método beginPath para indicar que comenzamos a dibujar la/s línea/s:



lienzo.beginPath();

Movemos el puntero gráfico a la coordenada donde comenzará a dibujarse llamando al método moveTo:



lienzo.moveTo(0,0);

A través del método lineTo trazamos una línea desde donde se encuentra el puntero gráfico hasta la coordenada indicada mediante parámetros:



lienzo.lineTo(150,300);

Trazamos una segunda línea desde donde finalizó la anterior hasta la nueva coordenada:



lienzo.lineTo(300,0);

Para que se hagan efectivas todas la líneas trazadas hasta el momento debemos llamar al método stroke:



lienzo.stroke();

El puntero gráfico se desplaza cada vez que llamamos al método lineTo.









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

  • Medallas
  • 0
    Favoritos
  • 9806
    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